/* * SD Blocks layout stylesheet (template). * * width < 1024px / width < 640px are replaced with query conditions built from * the breakpoints: `npm run build` writes build/css/layout.css with the theme * defaults, and PHP rebuilds it at runtime when settings.viewport differs. * * Rules: * - Public --sd-* properties are set inline by render.php and do NOT inherit * (@property below), so a Stack inside a Grid never picks up the Grid's gap. * - Private --_* properties resolve defaults once on the element; children may * read them (Section content width and gutter). * - Tablet and Mobile values switch at the screen breakpoints (@media), for every * block (0.45: Grid, Stack and the others used to follow the nearest Section or * Grid cell, so a Grid in a narrow column showed its Tablet value on a desktop). * Sections and Grid cells are still size containers for 100cqw sizes. * - :where(body:not(.sd-force-desktop)) lets the editor show Desktop rules on * a narrow canvas. It never matches on the front end. */ @property --sd-pad { syntax: '*'; inherits: false; } @property --sd-pad-tablet { syntax: '*'; inherits: false; } @property --sd-pad-mobile { syntax: '*'; inherits: false; } @property --sd-gap { syntax: '*'; inherits: false; } @property --sd-gap-tablet { syntax: '*'; inherits: false; } @property --sd-gap-mobile { syntax: '*'; inherits: false; } @property --sd-cols { syntax: '*'; inherits: false; } @property --sd-cols-tablet { syntax: '*'; inherits: false; } @property --sd-cols-mobile { syntax: '*'; inherits: false; } @property --sd-dir { syntax: '*'; inherits: false; } @property --sd-dir-tablet { syntax: '*'; inherits: false; } @property --sd-dir-mobile { syntax: '*'; inherits: false; } @property --sd-content { syntax: '*'; inherits: false; } @property --sd-per { syntax: '*'; inherits: false; } @property --sd-h { syntax: '*'; inherits: false; } @property --sd-h-tablet { syntax: '*'; inherits: false; } @property --sd-h-mobile { syntax: '*'; inherits: false; } @property --sd-pull { syntax: '*'; inherits: false; } @property --sd-pull-tablet { syntax: '*'; inherits: false; } @property --sd-pull-mobile { syntax: '*'; inherits: false; } @property --sd-sticky-top { syntax: '*'; inherits: false; } @property --sd-lcols { syntax: '*'; inherits: false; } @property --sd-lcols-tablet { syntax: '*'; inherits: false; } @property --sd-lcols-mobile { syntax: '*'; inherits: false; } @property --sd-icon-color { syntax: '*'; inherits: false; } @property --sd-per-tablet { syntax: '*'; inherits: false; } @property --sd-per-mobile { syntax: '*'; inherits: false; } @property --sd-peek { syntax: '*'; inherits: false; } @property --sd-sh { syntax: '*'; inherits: false; } @property --sd-sh-tablet { syntax: '*'; inherits: false; } @property --sd-sh-mobile { syntax: '*'; inherits: false; } @property --sd-sar { syntax: '*'; inherits: false; } @property --sd-sar-tablet { syntax: '*'; inherits: false; } @property --sd-sar-mobile { syntax: '*'; inherits: false; } @property --sd-peek-tablet { syntax: '*'; inherits: false; } @property --sd-peek-mobile { syntax: '*'; inherits: false; } @property --sd-cac { syntax: '*'; inherits: false; } @property --sd-cab { syntax: '*'; inherits: false; } @property --sd-cas { syntax: '*'; inherits: false; } @property --sd-flow { syntax: '*'; inherits: false; } @property --sd-align { syntax: '*'; inherits: false; } @property --sd-justify { syntax: '*'; inherits: false; } @property --sd-wrap { syntax: '*'; inherits: false; } @property --sd-overlay { syntax: '*'; inherits: false; } @property --sd-divider-h { syntax: '*'; inherits: false; } @property --sd-divider-color { syntax: '*'; inherits: false; } @property --sd-overlay-opacity { syntax: '*'; inherits: false; } @property --sd-pt { syntax: '*'; inherits: false; } @property --sd-pt-tablet { syntax: '*'; inherits: false; } @property --sd-pt-mobile { syntax: '*'; inherits: false; } @property --sd-pb { syntax: '*'; inherits: false; } @property --sd-pb-tablet { syntax: '*'; inherits: false; } @property --sd-pb-mobile { syntax: '*'; inherits: false; } @property --sd-px { syntax: '*'; inherits: false; } @property --sd-px-tablet { syntax: '*'; inherits: false; } @property --sd-px-mobile { syntax: '*'; inherits: false; } @property --sd-py { syntax: '*'; inherits: false; } @property --sd-py-tablet { syntax: '*'; inherits: false; } @property --sd-py-mobile { syntax: '*'; inherits: false; } @property --sd-gapx { syntax: '*'; inherits: false; } @property --sd-gapx-tablet { syntax: '*'; inherits: false; } @property --sd-gapx-mobile { syntax: '*'; inherits: false; } @property --sd-gapy { syntax: '*'; inherits: false; } @property --sd-gapy-tablet { syntax: '*'; inherits: false; } @property --sd-gapy-mobile { syntax: '*'; inherits: false; } @property --sd-measure { syntax: '*'; inherits: false; } @property --sd-measure-tablet { syntax: '*'; inherits: false; } @property --sd-measure-mobile { syntax: '*'; inherits: false; } @property --sd-minh { syntax: '*'; inherits: false; } @property --sd-minh-tablet { syntax: '*'; inherits: false; } @property --sd-minh-mobile { syntax: '*'; inherits: false; } @property --sd-radius { syntax: '*'; inherits: false; } @property --sd-shadow { syntax: '*'; inherits: false; } @property --sd-bg { syntax: '*'; inherits: false; } @property --sd-bg-opacity { syntax: '*'; inherits: false; } @property --sd-bgio { syntax: '*'; inherits: false; } @property --sd-map-h { syntax: '*'; inherits: false; } @property --sd-map-h-tablet { syntax: '*'; inherits: false; } @property --sd-map-h-mobile { syntax: '*'; inherits: false; } @property --sd-map-gap { syntax: '*'; inherits: false; } @property --sd-map-gap-tablet { syntax: '*'; inherits: false; } @property --sd-map-gap-mobile { syntax: '*'; inherits: false; } @property --sd-map-aspect { syntax: '*'; inherits: false; } @property --sd-map-cb { syntax: '*'; inherits: false; } @property --sd-map-ct { syntax: '*'; inherits: false; } @property --sd-bgi { syntax: '*'; inherits: false; } @property --sd-bgi-size { syntax: '*'; inherits: false; } @property --sd-bgi-pos { syntax: '*'; inherits: false; } @property --sd-bgi-repeat { syntax: '*'; inherits: false; } @property --sd-bgi-att { syntax: '*'; inherits: false; } @property --sd-aspect { syntax: '*'; inherits: false; } @property --sd-aspect-tablet { syntax: '*'; inherits: false; } @property --sd-aspect-mobile { syntax: '*'; inherits: false; } @property --sd-mcols { syntax: '*'; inherits: false; } @property --sd-mcols-tablet { syntax: '*'; inherits: false; } @property --sd-mcols-mobile { syntax: '*'; inherits: false; } @property --sd-reveal-delay { syntax: '*'; inherits: false; } @property --sd-rating { syntax: '*'; inherits: false; } @property --sd-rating-color { syntax: '*'; inherits: false; } @property --sd-bt-w { syntax: '*'; inherits: false; } @property --sd-bt-c { syntax: '*'; inherits: false; } @property --sd-bb-w { syntax: '*'; inherits: false; } @property --sd-bb-c { syntax: '*'; inherits: false; } @property --sd-div-w { syntax: '*'; inherits: false; } @property --sd-div-c { syntax: '*'; inherits: false; } @property --sd-media { syntax: '*'; inherits: false; } @property --sd-media-tablet { syntax: '*'; inherits: false; } @property --sd-media-mobile { syntax: '*'; inherits: false; } @property --sd-tracking { syntax: '*'; inherits: false; } @property --sd-leading { syntax: '*'; inherits: false; } @property --sd-weight { syntax: '*'; inherits: false; } @property --sd-dw { syntax: '*'; inherits: false; } @property --sd-dt { syntax: '*'; inherits: false; } @property --sd-dc { syntax: '*'; inherits: false; } @property --sd-dspace { syntax: '*'; inherits: false; } @property --sd-pos { syntax: '*'; inherits: false; } @property --sd-pos-tablet { syntax: '*'; inherits: false; } @property --sd-pos-mobile { syntax: '*'; inherits: false; } @property --sd-ox { syntax: '*'; inherits: false; } @property --sd-ox-tablet { syntax: '*'; inherits: false; } @property --sd-ox-mobile { syntax: '*'; inherits: false; } @property --sd-oy { syntax: '*'; inherits: false; } @property --sd-oy-tablet { syntax: '*'; inherits: false; } @property --sd-oy-mobile { syntax: '*'; inherits: false; } @property --sd-sx { syntax: '*'; inherits: false; } @property --sd-sx-tablet { syntax: '*'; inherits: false; } @property --sd-sx-mobile { syntax: '*'; inherits: false; } @property --sd-sy { syntax: '*'; inherits: false; } @property --sd-sy-tablet { syntax: '*'; inherits: false; } @property --sd-sy-mobile { syntax: '*'; inherits: false; } @property --sd-w { syntax: '*'; inherits: false; } @property --sd-w-tablet { syntax: '*'; inherits: false; } @property --sd-w-mobile { syntax: '*'; inherits: false; } @property --sd-h { syntax: '*'; inherits: false; } @property --sd-h-tablet { syntax: '*'; inherits: false; } @property --sd-h-mobile { syntax: '*'; inherits: false; } @property --sd-basis { syntax: '*'; inherits: false; } @property --sd-basis-tablet { syntax: '*'; inherits: false; } @property --sd-basis-mobile { syntax: '*'; inherits: false; } @property --sd-bls { syntax: '*'; inherits: false; } @property --sd-bls-tablet { syntax: '*'; inherits: false; } @property --sd-bls-mobile { syntax: '*'; inherits: false; } @property --sd-ble { syntax: '*'; inherits: false; } @property --sd-ble-tablet { syntax: '*'; inherits: false; } @property --sd-ble-mobile { syntax: '*'; inherits: false; } @property --sd-ovt { syntax: '*'; inherits: false; } @property --sd-ovt-tablet { syntax: '*'; inherits: false; } @property --sd-ovt-mobile { syntax: '*'; inherits: false; } @property --sd-ovb { syntax: '*'; inherits: false; } @property --sd-ovb-tablet { syntax: '*'; inherits: false; } @property --sd-ovb-mobile { syntax: '*'; inherits: false; } @property --sd-ovs { syntax: '*'; inherits: false; } @property --sd-ovs-tablet { syntax: '*'; inherits: false; } @property --sd-ovs-mobile { syntax: '*'; inherits: false; } @property --sd-ove { syntax: '*'; inherits: false; } @property --sd-ove-tablet { syntax: '*'; inherits: false; } @property --sd-ove-mobile { syntax: '*'; inherits: false; } @property --sd-ta { syntax: '*'; inherits: false; } @property --sd-ta-tablet { syntax: '*'; inherits: false; } @property --sd-ta-mobile { syntax: '*'; inherits: false; } @property --sd-tar { syntax: '*'; inherits: false; } @property --sd-tar-tablet { syntax: '*'; inherits: false; } @property --sd-tar-mobile { syntax: '*'; inherits: false; } @property --sd-tarj { syntax: '*'; inherits: false; } @property --sd-tarj-tablet { syntax: '*'; inherits: false; } @property --sd-tarj-mobile { syntax: '*'; inherits: false; } @property --sd-bgfa { syntax: '*'; inherits: false; } @property --sd-ds { syntax: '*'; inherits: false; } @property --sd-ds-tablet { syntax: '*'; inherits: false; } @property --sd-ds-mobile { syntax: '*'; inherits: false; } @property --sd-dc { syntax: '*'; inherits: false; } @property --sd-dx { syntax: '*'; inherits: false; } @property --sd-dy { syntax: '*'; inherits: false; } @property --sd-do { syntax: '*'; inherits: false; } @property --sd-dr { syntax: '*'; inherits: false; } @property --sd-tw { syntax: '*'; inherits: false; } @property --sd-tw-tablet { syntax: '*'; inherits: false; } @property --sd-tw-mobile { syntax: '*'; inherits: false; } @property --sd-tab-pb { syntax: '*'; inherits: false; } @property --sd-tab-pp { syntax: '*'; inherits: false; } @property --sd-tab-pp-tablet { syntax: '*'; inherits: false; } @property --sd-tab-pp-mobile { syntax: '*'; inherits: false; } @property --sd-tab-ab { syntax: '*'; inherits: false; } @property --sd-tab-at { syntax: '*'; inherits: false; } @property --sd-tab-ic { syntax: '*'; inherits: false; } @property --sd-tab-bw { syntax: '*'; inherits: false; } @property --sd-tab-bc { syntax: '*'; inherits: false; } @property --sd-mm-pb { syntax: '*'; inherits: false; } @property --sd-mm-pc { syntax: '*'; inherits: false; } @property --sd-mm-pp { syntax: '*'; inherits: false; } @property --sd-mm-pp-tablet { syntax: '*'; inherits: false; } @property --sd-mm-pp-mobile { syntax: '*'; inherits: false; } @property --sd-fa { syntax: '*'; inherits: false; } @property --sd-tj { syntax: '*'; inherits: false; } @property --sd-tj-tablet { syntax: '*'; inherits: false; } @property --sd-tj-mobile { syntax: '*'; inherits: false; } @property --sd-tm { syntax: '*'; inherits: false; } @property --sd-tm-tablet { syntax: '*'; inherits: false; } @property --sd-tm-mobile { syntax: '*'; inherits: false; } @property --sd-spt { syntax: '*'; inherits: false; } @property --sd-spt-tablet { syntax: '*'; inherits: false; } @property --sd-spt-mobile { syntax: '*'; inherits: false; } @property --sd-spr { syntax: '*'; inherits: false; } @property --sd-spr-tablet { syntax: '*'; inherits: false; } @property --sd-spr-mobile { syntax: '*'; inherits: false; } @property --sd-spb { syntax: '*'; inherits: false; } @property --sd-spb-tablet { syntax: '*'; inherits: false; } @property --sd-spb-mobile { syntax: '*'; inherits: false; } @property --sd-spl { syntax: '*'; inherits: false; } @property --sd-spl-tablet { syntax: '*'; inherits: false; } @property --sd-spl-mobile { syntax: '*'; inherits: false; } @property --sd-inset { syntax: '*'; inherits: false; } @property --sd-inset-tablet { syntax: '*'; inherits: false; } @property --sd-inset-mobile { syntax: '*'; inherits: false; } @property --sd-imgh { syntax: '*'; inherits: false; } @property --sd-imgh-tablet { syntax: '*'; inherits: false; } @property --sd-imgh-mobile { syntax: '*'; inherits: false; } @property --sd-fs { syntax: '*'; inherits: false; } @property --sd-fs-tablet { syntax: '*'; inherits: false; } @property --sd-fs-mobile { syntax: '*'; inherits: false; } @property --sd-rotate { syntax: '*'; inherits: false; } @property --sd-ps { syntax: '*'; inherits: false; } @property --sd-ps-tablet { syntax: '*'; inherits: false; } @property --sd-ps-mobile { syntax: '*'; inherits: false; } @property --sd-focal { syntax: '*'; inherits: false; } @layer sd.base, sd.layout, sd.variations, sd.utilities; @layer sd.layout { /* ---- Section: full-width band, the measured area for its content ---- */ .sd-section { --_pad: var(--sd-pad, var(--wp--preset--spacing--60)); --_cw: var(--sd-content, var(--wp--style--global--content-size, 48rem)); --_content: var(--_cw); --_gutter: var(--wp--style--root--padding-right, 1rem); --_flow: var(--sd-flow, var(--wp--style--block-gap, 1.5rem)); container: sd / inline-size; padding-block: var(--sd-pt, var(--_pad)) var(--sd-pb, var(--_pad)); /* * 0.43: the Section places its children with named grid tracks instead of styling them: * full (edge to edge) ⊃ wide ⊃ content ⊃ text (the text column, narrowed by "Text column * width"). A child's own margins, width and alignment work inside its track. */ --_c: min(var(--_content), 100% - 2 * var(--_gutter)); --_w: max(var(--_c), min(var(--wp--style--global--wide-size, 80rem), 100% - 2 * var(--_gutter))); --_t: var(--_c); --_tl: calc((var(--_c) - var(--_t)) / 2); display: grid; grid-template-columns: [full-start] minmax(var(--_gutter), 1fr) [wide-start] calc((var(--_w) - var(--_c)) / 2) [content-start] var(--_tl) [text-start] var(--_t) [text-end] calc(var(--_c) - var(--_t) - var(--_tl)) [content-end] calc((var(--_w) - var(--_c)) / 2) [wide-end] minmax(var(--_gutter), 1fr) [full-end]; align-content: start; } /* Overlay: a tinted layer between the Section background and its content. */ .sd-section.has-sd-overlay, .sd-stack.has-sd-overlay { /* Public --sd-* don't inherit, and ::before only sees inherited values. */ --_overlay: var(--sd-overlay, #000); --_overlay-opacity: var(--sd-overlay-opacity, 0.5); position: relative; isolation: isolate; } /* A container can't measure itself, so Section spacing follows the screen. */ @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-section { padding-block: var(--sd-pt-tablet, var(--sd-pad-tablet, var(--sd-pt, var(--_pad)))) var(--sd-pb-tablet, var(--sd-pad-tablet, var(--sd-pb, var(--_pad)))); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-section { padding-block: var(--sd-pt-mobile, var(--sd-pad-mobile, var(--sd-pt-tablet, var(--sd-pad-tablet, var(--sd-pt, var(--_pad)))))) var(--sd-pb-mobile, var(--sd-pad-mobile, var(--sd-pb-tablet, var(--sd-pad-tablet, var(--sd-pb, var(--_pad)))))); } } /* ---- Grid ---- */ .sd-grid { --_gap: var(--sd-gap, var(--wp--preset--spacing--40)); --_cols: var(--sd-cols, 1fr); display: grid; gap: var(--_gap); --_cg-now: var(--sd-gapx, var(--_gap)); --_rg-now: var(--sd-gapy, var(--_gap)); column-gap: var(--_cg-now); row-gap: var(--_rg-now); grid-template-columns: var(--_cols); --_align: var(--sd-align, stretch); --_gji: var(--sd-gji, stretch); --_gac: var(--sd-gac, normal); align-items: var(--_align); justify-items: var(--_gji); align-content: var(--_gac); /* Columns in use (items' spans stay inside them), row heights. */ --_gcn: var(--sd-gcn, 12); --_gcn-now: var(--_gcn); --_rows: var(--sd-rows, none); --_arows: var(--sd-arows, auto); grid-template-rows: var(--_rows); grid-auto-rows: var(--_arows); } /* Cells are measured too, so layouts inside a cell respond to the cell. */ .sd-grid > * { container: sd / inline-size; min-width: 0; } /* ---- Stack ---- */ /* Padding stays inside the width a block is given (0.39.1): a padded Stack in a Section's content width, an exact width, a fill or grow. */ .sd-stack, .sd-grid { box-sizing: border-box; } .sd-stack { --_dir: var(--sd-dir, column); --_gap: var(--sd-gap, var(--wp--preset--spacing--40)); --_pad: var(--sd-pad, 0); display: flex; flex-direction: var(--_dir); --_wrap: var(--sd-wrap, nowrap); --_align: var(--sd-align, stretch); --_justify: var(--sd-justify, flex-start); flex-wrap: var(--_wrap); align-items: var(--_align); justify-content: var(--_justify); gap: var(--_gap); padding: var(--_pad); } /* Whole-card link: covers the Stack; real links and controls stay on top. */ .sd-stack.has-sd-link { position: relative; } .sd-stack__link { position: absolute; inset: 0; z-index: 1; } .sd-stack.has-sd-link :where(a, button, input, select, textarea, label):not(.sd-stack__link) { position: relative; z-index: 2; } /* ---- Carousel: slides per view and gap (looks are in the block's style.css) ---- */ .sd-carousel { --_per: var(--sd-per, 3); --_gap: var(--sd-gap, var(--wp--preset--spacing--40)); --_peek: var(--sd-peek, 0px); --_per-now: var(--_per); --_gap-now: var(--_gap); --_peek-now: var(--_peek); /* Slide height / shape (0.46): every slide the same, per device. */ --_sh: var(--sd-sh, auto); --_sh-now: var(--_sh); --_sar: var(--sd-sar, auto); --_sar-now: var(--_sar); } /* Carousel arrows on the sides: over the slides' edges (inside, overlay) or in the space * beside the carousel (outside). Looks are in the block's style.css. */ .sd-carousel:is(.is-arrows-sides-inside, .is-arrows-sides-outside, .is-arrows-overlay) > .sd-carousel__viewport > .sd-carousel__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; } .sd-carousel:is(.is-arrows-sides-inside, .is-arrows-overlay) > .sd-carousel__viewport > .sd-carousel__arrow.is-prev { left: var(--wp--preset--spacing--30, 0.75rem); } .sd-carousel:is(.is-arrows-sides-inside, .is-arrows-overlay) > .sd-carousel__viewport > .sd-carousel__arrow.is-next { right: var(--wp--preset--spacing--30, 0.75rem); } .sd-carousel.is-arrows-sides-outside > .sd-carousel__viewport > .sd-carousel__arrow.is-prev { right: calc(100% + var(--wp--preset--spacing--30, 0.75rem)); } .sd-carousel.is-arrows-sides-outside > .sd-carousel__viewport > .sd-carousel__arrow.is-next { left: calc(100% + var(--wp--preset--spacing--30, 0.75rem)); } /* ---- Spacer, pull-up offset, Icon List columns ---- */ .sd-spacer { --_h: var(--sd-h, var(--wp--preset--spacing--60)); height: var(--_h); } .has-sd-pull { --_pull: var(--sd-pull, 0px); --_pull-now: var(--_pull); } .sd-icon-list { --_lcols: var(--sd-lcols, 1); --_lcols-now: var(--_lcols); --_gap: var(--sd-gap, var(--wp--preset--spacing--20)); --_gap-now: var(--_gap); /* Private copy: public --sd-* don't inherit down to the icons. */ --_icon: var(--sd-icon-color, var(--wp--preset--color--primary, currentColor)); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-spacer { height: var(--sd-h-tablet, var(--_h)); } :where(body:not(.sd-force-desktop)) .has-sd-pull { --_pull-now: var(--sd-pull-tablet, var(--_pull)); } :where(body:not(.sd-force-desktop)) .sd-icon-list { --_lcols-now: var(--sd-lcols-tablet, var(--_lcols)); --_gap-now: var(--sd-gap-tablet, var(--_gap)); } :where(body:not(.sd-force-desktop)) .sd-carousel { --_per-now: var(--sd-per-tablet, var(--_per)); --_gap-now: var(--sd-gap-tablet, var(--_gap)); --_peek-now: var(--sd-peek-tablet, var(--_peek)); --_sh-now: var(--sd-sh-tablet, var(--_sh)); --_sar-now: var(--sd-sar-tablet, var(--_sar)); } :where(body:not(.sd-force-desktop)) .sd-grid { --_cg-now: var(--sd-gapx-tablet, var(--sd-gap-tablet, var(--sd-gapx, var(--_gap)))); --_rg-now: var(--sd-gapy-tablet, var(--sd-gap-tablet, var(--sd-gapy, var(--_gap)))); column-gap: var(--_cg-now); row-gap: var(--_rg-now); grid-template-columns: var(--sd-cols-tablet, var(--_cols)); --_gcn-now: var(--sd-gcn-tablet, var(--_gcn)); grid-template-rows: var(--sd-rows-tablet, var(--_rows)); grid-auto-rows: var(--sd-arows-tablet, var(--_arows)); align-items: var(--sd-align-tablet, var(--_align)); justify-items: var(--sd-gji-tablet, var(--_gji)); align-content: var(--sd-gac-tablet, var(--_gac)); } :where(body:not(.sd-force-desktop)) .sd-stack { flex-wrap: var(--sd-wrap-tablet, var(--_wrap)); align-items: var(--sd-align-tablet, var(--_align)); justify-content: var(--sd-justify-tablet, var(--_justify)); flex-direction: var(--sd-dir-tablet, var(--_dir)); gap: var(--sd-gap-tablet, var(--_gap)); padding: var(--sd-pad-tablet, var(--_pad)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-spacer { height: var(--sd-h-mobile, var(--sd-h-tablet, var(--_h))); } :where(body:not(.sd-force-desktop)) .has-sd-pull { --_pull-now: var(--sd-pull-mobile, var(--sd-pull-tablet, var(--_pull))); } :where(body:not(.sd-force-desktop)) .sd-icon-list { --_lcols-now: var(--sd-lcols-mobile, var(--sd-lcols-tablet, var(--_lcols))); --_gap-now: var(--sd-gap-mobile, var(--sd-gap-tablet, var(--_gap))); } :where(body:not(.sd-force-desktop)) .sd-carousel { --_per-now: var(--sd-per-mobile, var(--sd-per-tablet, var(--_per))); --_gap-now: var(--sd-gap-mobile, var(--sd-gap-tablet, var(--_gap))); --_peek-now: var(--sd-peek-mobile, var(--sd-peek-tablet, var(--_peek))); --_sh-now: var(--sd-sh-mobile, var(--sd-sh-tablet, var(--_sh))); --_sar-now: var(--sd-sar-mobile, var(--sd-sar-tablet, var(--_sar))); } /* No room beside the content on phones: outside arrows come inside. */ :where(body:not(.sd-force-desktop)) .sd-carousel.is-arrows-sides-outside > .sd-carousel__viewport > .sd-carousel__arrow.is-prev { right: auto; left: var(--wp--preset--spacing--20, 0.5rem); } :where(body:not(.sd-force-desktop)) .sd-carousel.is-arrows-sides-outside > .sd-carousel__viewport > .sd-carousel__arrow.is-next { left: auto; right: var(--wp--preset--spacing--20, 0.5rem); } :where(body:not(.sd-force-desktop)) .sd-grid { --_cg-now: var(--sd-gapx-mobile, var(--sd-gap-mobile, var(--sd-gapx-tablet, var(--sd-gap-tablet, var(--sd-gapx, var(--_gap)))))); --_rg-now: var(--sd-gapy-mobile, var(--sd-gap-mobile, var(--sd-gapy-tablet, var(--sd-gap-tablet, var(--sd-gapy, var(--_gap)))))); column-gap: var(--_cg-now); row-gap: var(--_rg-now); grid-template-columns: var(--sd-cols-mobile, var(--sd-cols-tablet, var(--_cols))); --_gcn-now: var(--sd-gcn-mobile, var(--sd-gcn-tablet, var(--_gcn))); grid-template-rows: var(--sd-rows-mobile, var(--sd-rows-tablet, var(--_rows))); grid-auto-rows: var(--sd-arows-mobile, var(--sd-arows-tablet, var(--_arows))); align-items: var(--sd-align-mobile, var(--sd-align-tablet, var(--_align))); justify-items: var(--sd-gji-mobile, var(--sd-gji-tablet, var(--_gji))); align-content: var(--sd-gac-mobile, var(--sd-gac-tablet, var(--_gac))); } :where(body:not(.sd-force-desktop)) .sd-stack { flex-wrap: var(--sd-wrap-mobile, var(--sd-wrap-tablet, var(--_wrap))); align-items: var(--sd-align-mobile, var(--sd-align-tablet, var(--_align))); justify-content: var(--sd-justify-mobile, var(--sd-justify-tablet, var(--_justify))); flex-direction: var(--sd-dir-mobile, var(--sd-dir-tablet, var(--_dir))); gap: var(--sd-gap-mobile, var(--sd-gap-tablet, var(--_gap))); padding: var(--sd-pad-mobile, var(--sd-pad-tablet, var(--_pad))); } } } /* * 0.43: what a Section, Stack or Grid does to its children is a default, never !important. * Placement (track, width, alignment) has zero strength (:where): anything you set wins. * Margins are one class strong: enough to keep browser and WordPress block margins out of * the layout, weaker than any block setting, style or custom CSS class. * * Section: each child sits in the text column (= the content column unless "Text column width" * is set), centred if it is narrower, and fills it otherwise, like a block in normal flow. * Wide and full blocks, Grids and bleeding blocks take their own tracks. "Space between * blocks" is the top margin of every child after the first; a margin you set replaces it. */ :where(.sd-section > :not(.sd-deco)) { grid-column: text; justify-self: center; width: -webkit-fill-available; width: -moz-available; width: stretch; min-width: 0; } :where(.sd-section > :is(.wp-block-sd-grid, .has-sd-bleed)) { grid-column: content; } :where(.sd-section > .alignwide) { grid-column: wide; } :where(.sd-section > .alignfull) { grid-column: full; } .sd-section > :where(:not(.sd-deco)) { margin-block: 0; } .sd-section > :where(:not(.sd-deco)) + :where(:not(.sd-deco)) { margin-block-start: var(--_flow); } /* Stack and Grid: their gap is the space between children; a margin you set adds to it. */ .sd-stack > *, .sd-grid > * { margin-block: 0; } /* * 0.53.1 (Karl, ITSL): in a Stack with no gap (0), a new paragraph still starts a paragraph's space * (1em) below the last one, as in normal text. --sd-para (1 / 0 per device, from render.php and the * editor) is 1 where the Stack is a column with gap 0; a set gap (even a small one) is kept as is. */ @property --sd-para { syntax: '*'; inherits: false; } @property --sd-para-tablet { syntax: '*'; inherits: false; } @property --sd-para-mobile { syntax: '*'; inherits: false; } .sd-stack.has-sd-para { --_parad: var(--sd-para, 0); --_para: var(--_parad); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-para { --_para: var(--sd-para-tablet, var(--_parad)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-para { --_para: var(--sd-para-mobile, var(--sd-para-tablet, var(--_parad))); } } .sd-stack.has-sd-para > :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: calc(1em * var(--_para)); } /* * Decorative layers (video, dividers) sit behind the content. Unlayered: themes commonly * set img, svg, video { height: auto }, which would beat these rules inside a layer. */ .sd-section.has-sd-deco { position: relative; isolation: isolate; } .sd-section__bg, .sd-bg { position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none; height: 100%; object-fit: cover; pointer-events: none; } .sd-bg.is-contain { object-fit: contain; } /* Art direction (0.24): a around an is layout-transparent; the img keeps its rules. */ .sd-picture { display: contents; } /* Effects on the background image (0.25): --sd-bgfa is the strength (0–1); classes on the block. */ .has-sd-bgfa { --_bgfa: var(--sd-bgfa); } .is-sd-bgfilter-grayscale > .sd-bg, .is-sd-bgfilter-grayscale > .sd-picture > .sd-bg { filter: grayscale(var(--_bgfa, 1)); } .is-sd-bgfilter-sepia > .sd-bg, .is-sd-bgfilter-sepia > .sd-picture > .sd-bg { filter: sepia(var(--_bgfa, 1)); } .is-sd-bgfilter-blur > .sd-bg, .is-sd-bgfilter-blur > .sd-picture > .sd-bg { filter: blur(calc(var(--_bgfa, 0.25) * 20px)); } .is-sd-bgfilter-blur > .sd-bg, .is-sd-bgfilter-blur > .sd-picture > .sd-bg { clip-path: inset(0); } /* no halo past the block's edges */ .is-sd-bgfilter-brightness > .sd-bg, .is-sd-bgfilter-brightness > .sd-picture > .sd-bg { filter: brightness(calc(1 + var(--_bgfa, 0.2))); } .is-sd-bgfilter-contrast > .sd-bg, .is-sd-bgfilter-contrast > .sd-picture > .sd-bg { filter: contrast(calc(1 + var(--_bgfa, 0.2))); } .is-sd-bgfilter-drop-shadow > .sd-bg, .is-sd-bgfilter-drop-shadow > .sd-picture > .sd-bg { filter: drop-shadow(0 8px 16px rgb(0 0 0 / var(--_bgfa, 0.35))); } .is-sd-bgblend-multiply > .sd-bg, .is-sd-bgblend-multiply > .sd-picture > .sd-bg { mix-blend-mode: multiply; } .is-sd-bgblend-screen > .sd-bg, .is-sd-bgblend-screen > .sd-picture > .sd-bg { mix-blend-mode: screen; } .is-sd-bgblend-overlay > .sd-bg, .is-sd-bgblend-overlay > .sd-picture > .sd-bg { mix-blend-mode: overlay; } .is-sd-bgblend-darken > .sd-bg, .is-sd-bgblend-darken > .sd-picture > .sd-bg { mix-blend-mode: darken; } .is-sd-bgblend-lighten > .sd-bg, .is-sd-bgblend-lighten > .sd-picture > .sd-bg { mix-blend-mode: lighten; } .is-sd-bgblend-luminosity > .sd-bg, .is-sd-bgblend-luminosity > .sd-picture > .sd-bg { mix-blend-mode: luminosity; } .is-sd-bgblend-soft-light > .sd-bg, .is-sd-bgblend-soft-light > .sd-picture > .sd-bg { mix-blend-mode: soft-light; } .sd-section__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .sd-section__video { display: none; } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-section__video.is-desktop-only { display: none; } } .sd-divider { position: absolute; left: 0; right: 0; z-index: -1; height: var(--sd-divider-h); line-height: 0; color: var(--sd-divider-color); pointer-events: none; } .sd-divider svg { display: block; width: 100%; height: 100%; fill: currentColor; } .sd-divider--bottom { bottom: -1px; } .sd-divider--top { top: -1px; transform: rotate(180deg); } .sd-divider--bottom.is-flipped { transform: scaleX(-1); } .sd-divider--top.is-flipped { transform: rotate(180deg) scaleX(-1); } /* * Spacer, pull-up and sticky offset override margins and position that other * rules set (the Section's flow gap, core's sticky support), so they are * unlayered and use !important on purpose. */ .sd-section > :where(.sd-spacer), .sd-section > :where(.sd-spacer) + :where(*) { margin-block-start: 0; } .sd-spacer { margin-block: 0; } .has-sd-pull { position: relative; z-index: 1; margin-block-start: calc(var(--_pull-now) * -1) !important; } /* Sticky Stack (its own setting: core sticky needs the theme to enable it). */ .has-sd-sticky-top { position: sticky; top: calc(var(--sd-sticky-top, 0px) + var(--wp-admin--admin-bar--position-offset, 0px)); z-index: 2; } /* A grid item would stretch to the row's height and have nowhere to stick. */ .sd-grid > .has-sd-sticky-top { align-self: start; } /* Stacked on phones, a sticky block would sit on top of the content below it. */ @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-sticky-top { position: static; } } /* * Tabs on tablets or phones (screen width): an accordion (default) or a scrolling tab row. * Unlayered so it beats the block's own (unlayered) looks. */ /* 0.28: the tab list width (vertical) and panel padding per device; the looks are in the block. */ .sd-tabs { --_tw: var(--sd-tw, var(--wp--custom--media--lg, 14rem)); --_tw-now: var(--_tw); --_tab-pp: var(--sd-tab-pp, var(--wp--preset--spacing--50, 2rem)); --_tab-pp-now: var(--_tab-pp); } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-tabs.is-mobile-accordion { gap: 0; } :where(body:not(.sd-force-desktop)) .sd-tabs.is-mobile-accordion > .sd-tabs__list { display: none; } :where(body:not(.sd-force-desktop)) .sd-tabs.is-mobile-accordion > .sd-tabs__panels > .sd-tabs__item > .sd-tabs__acc { display: flex; } :where(body:not(.sd-force-desktop)) .sd-tabs.is-mobile-accordion > .sd-tabs__panels > .sd-tabs__item > .sd-tabs__panel { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } :where(body:not(.sd-force-desktop)) .sd-tabs.is-align-stretch > .sd-tabs__list > .sd-tabs__tab { flex: 0 0 auto; } /* Vertical tabs (0.28) go back to a row of tabs, or the accordion, on phones. The extra * :is() beats the block's own vertical rules (same classes, loaded later). */ :where(body:not(.sd-force-desktop)) .sd-tabs.is-vertical:is(.is-mobile-accordion, .is-mobile-tabs) { flex-direction: column; } :where(body:not(.sd-force-desktop)) .sd-tabs.is-vertical:is(.is-mobile-accordion, .is-mobile-tabs) > .sd-tabs__list { flex: none; flex-direction: row; width: auto; overflow-x: auto; } :where(body:not(.sd-force-desktop)) .sd-tabs.is-vertical.is-underline:is(.is-mobile-accordion, .is-mobile-tabs) > .sd-tabs__list { box-shadow: inset 0 -1px 0 var(--_line); } :where(body:not(.sd-force-desktop)) .sd-tabs.is-vertical.is-underline:is(.is-mobile-accordion, .is-mobile-tabs) .sd-tabs__tab { border-inline-end: 0; border-bottom: 3px solid transparent; } :where(body:not(.sd-force-desktop)) .sd-tabs.is-vertical.is-underline:is(.is-mobile-accordion, .is-mobile-tabs) .sd-tabs__tab[aria-selected="true"] { border-bottom-color: var(--_on); } :where(body:not(.sd-force-desktop)) .sd-tabs.is-mobile-accordion.has-sd-tab-pb > .sd-tabs__panels > .sd-tabs__item > .sd-tabs__panel { padding: var(--_tab-pp-now); margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); } } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-tabs { --_tw-now: var(--sd-tw-tablet, var(--_tw)); --_tab-pp-now: var(--sd-tab-pp-tablet, var(--_tab-pp)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-tabs { --_tw-now: var(--sd-tw-mobile, var(--sd-tw-tablet, var(--_tw))); --_tab-pp-now: var(--sd-tab-pp-mobile, var(--sd-tab-pp-tablet, var(--_tab-pp))); } } /* * Mega menu (0.31): the panel padding per device. It sits in the header, outside any Section, * so the screen (not a container) is the breakpoint. The looks are in the block. */ .sd-mega { --_mm-pp: var(--sd-mm-pp, var(--wp--preset--spacing--50, 2rem)); --_mm-pp-now: var(--_mm-pp); } /* The panel is a measured area: a Grid inside follows the panel's width (a card, the phone overlay). */ .sd-mega__panel { container: sd / inline-size; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-mega { --_mm-pp-now: var(--sd-mm-pp-tablet, var(--_mm-pp)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-mega { --_mm-pp-now: var(--sd-mm-pp-mobile, var(--sd-mm-pp-tablet, var(--_mm-pp))); } } /* Full-width Sections sit flush against each other (no page block gap between). */ .wp-block-sd-section + .wp-block-sd-section { margin-block-start: 0; } /* Icon List */ .sd-icon-list { display: grid; grid-template-columns: repeat(var(--_lcols-now), minmax(0, 1fr)); gap: var(--_gap-now); margin-inline: 0; padding: 0; list-style: none; } .sd-icon-list__item { display: flex; align-items: flex-start; gap: 0.6em; margin: 0; } .sd-icon-list__icon { flex: none; width: 1.25em; height: 1.25em; margin-top: 0.1em; color: var(--_icon, currentColor); fill: currentColor; } .sd-icon-list__item > .sd-icon-list__text { min-width: 0; } /* * ---- Design settings (0.8.0) ---- * Measure, minimum height, alignment, sides of padding, borders, radius, shadow, translucent * backgrounds, content position and aspect ratio. Unlayered: theme style variations (Card, * Dark…) are unlayered too and would beat these rules inside a layer. Values are token * variables set by the block (see includes/design.php). */ /* Section: minimum height and vertical alignment follow the screen, like its padding. */ .sd-section.has-sd-minh { --_minh: var(--sd-minh, auto); --_minh-now: var(--_minh); min-height: var(--_minh-now); } /* Content position (0.35: per device, --sd-valign start | center | end). */ .sd-section.has-sd-valign { --_va: var(--sd-valign, start); --_va-now: var(--_va); align-content: var(--_va-now); } /* Section measure (0.43): narrows the text column track (not grids, bleeds, wide or full). */ .sd-section.has-sd-measure { --_measure: var(--sd-measure); --_measure-now: var(--_measure); --_t: min(var(--_measure-now), var(--_c)); } /* Text column at the left edge of the content column instead of centred. */ .sd-section.is-measure-start { --_tl: 0px; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-section.has-sd-minh { --_minh-now: var(--sd-minh-tablet, var(--_minh)); } :where(body:not(.sd-force-desktop)) .sd-section.has-sd-measure { --_measure-now: var(--sd-measure-tablet, var(--_measure)); } :where(body:not(.sd-force-desktop)) .sd-section.has-sd-valign { --_va-now: var(--sd-valign-tablet, var(--_va)); } :where(body:not(.sd-force-desktop)) .sd-section { --_content: var(--sd-content-tablet, var(--_cw)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-section.has-sd-minh { --_minh-now: var(--sd-minh-mobile, var(--sd-minh-tablet, var(--_minh))); } :where(body:not(.sd-force-desktop)) .sd-section.has-sd-measure { --_measure-now: var(--sd-measure-mobile, var(--sd-measure-tablet, var(--_measure))); } :where(body:not(.sd-force-desktop)) .sd-section.has-sd-valign { --_va-now: var(--sd-valign-mobile, var(--sd-valign-tablet, var(--_va))); } :where(body:not(.sd-force-desktop)) .sd-section { --_content: var(--sd-content-mobile, var(--sd-content-tablet, var(--_cw))); } } /* Fixed (parallax) backgrounds: off on touch screens and for reduced motion. */ @media (hover: none), (prefers-reduced-motion: reduce) { .sd-section.has-background, .sd-stack.has-background { background-attachment: scroll !important; } } /* Stack: padding per axis (beats a style's padding, e.g. Card). */ .sd-stack.has-sd-pady { --_py: var(--sd-py, var(--sd-pad, 0)); --_py-now: var(--_py); padding-block: var(--_py-now); } .sd-stack.has-sd-padx { --_px: var(--sd-px, var(--sd-pad, 0)); --_px-now: var(--_px); padding-inline: var(--_px-now); } .sd-stack.has-sd-measure { --_measure: var(--sd-measure); --_measure-now: var(--_measure); max-width: min(var(--_measure-now), 100%) !important; } .sd-stack.has-sd-minh { --_minh: var(--sd-minh, auto); --_minh-now: var(--_minh); min-height: var(--_minh-now); } /* Grid cells are size containers, so auto margins alone would shrink them to nothing. */ .sd-stack.has-sd-measure, .sd-stack[class*="is-self-"] { width: 100%; box-sizing: border-box; } .sd-stack.is-self-start { margin-inline: 0 auto !important; } .sd-stack.is-self-center { margin-inline: auto !important; } .sd-stack.is-self-end { margin-inline: auto 0 !important; } /* Content position (column Stack): vertical = main axis, horizontal = cross axis. */ .sd-stack.is-v-start { justify-content: flex-start; } .sd-stack.is-v-center { justify-content: center; } .sd-stack.is-v-end { justify-content: flex-end; } .sd-stack.is-h-start { align-items: flex-start; } .sd-stack.is-h-center { align-items: center; } .sd-stack.is-h-end { align-items: flex-end; } /* Aspect ratio, per device (0.55): Stack, Position, Before / After. */ :is(.sd-stack, .sd-position, .sd-ba).has-sd-aspect { --_ar: var(--sd-aspect, auto); --_ar-now: var(--_ar); aspect-ratio: var(--_ar-now); } /* Grid items with an aspect ratio would otherwise size their width from their height. */ .sd-stack.has-sd-aspect { justify-self: stretch; width: 100%; min-width: 0; box-sizing: border-box; } :is(.sd-stack, .sd-grid).has-sd-shadow { box-shadow: var(--sd-shadow); } .sd-stack.has-sd-deco { position: relative; isolation: isolate; } .sd-bg { border-radius: inherit; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-pady { --_py-now: var(--sd-py-tablet, var(--sd-pad-tablet, var(--_py))); } :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-padx { --_px-now: var(--sd-px-tablet, var(--sd-pad-tablet, var(--_px))); } :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-measure { --_measure-now: var(--sd-measure-tablet, var(--_measure)); } :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-minh { --_minh-now: var(--sd-minh-tablet, var(--_minh)); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-position, .sd-ba).has-sd-aspect { --_ar-now: var(--sd-aspect-tablet, var(--_ar)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-pady { --_py-now: var(--sd-py-mobile, var(--sd-pad-mobile, var(--sd-py-tablet, var(--sd-pad-tablet, var(--_py))))); } :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-padx { --_px-now: var(--sd-px-mobile, var(--sd-pad-mobile, var(--sd-px-tablet, var(--sd-pad-tablet, var(--_px))))); } :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-measure { --_measure-now: var(--sd-measure-mobile, var(--sd-measure-tablet, var(--_measure))); } :where(body:not(.sd-force-desktop)) .sd-stack.has-sd-minh { --_minh-now: var(--sd-minh-mobile, var(--sd-minh-tablet, var(--_minh))); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-position, .sd-ba).has-sd-aspect { --_ar-now: var(--sd-aspect-mobile, var(--sd-aspect-tablet, var(--_ar))); } } /* ---- Core blocks (0.9 / 0.10): image sizes per device, Buttons stacked on phones ---- */ @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .wp-block-image.has-sd-media, :where(body:not(.sd-force-desktop)) .wp-block-icon.has-sd-media, :where(body:not(.sd-force-desktop)) .sd-icon.has-sd-media { --_media-now: var(--sd-media-tablet, var(--_media)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .wp-block-image.has-sd-media, :where(body:not(.sd-force-desktop)) .wp-block-icon.has-sd-media, :where(body:not(.sd-force-desktop)) .sd-icon.has-sd-media { --_media-now: var(--sd-media-mobile, var(--sd-media-tablet, var(--_media))); } } /* ---- Decorations (0.27): dots, grid, blob, ring, line, ellipse or an image, anchored to a corner, * edge or the centre of a Section / Stack, behind the content (or in front). Size from the media * family per device; offsets nudge from the anchor; opacity and rotation from their families. */ .sd-decor { --_ds: var(--sd-ds, var(--wp--custom--media--lg, 11rem)); --_ds-now: var(--_ds); --_ax: 0%; --_ay: 0%; position: absolute; width: var(--_ds-now); height: var(--_ds-now); color: var(--sd-dc, var(--wp--preset--color--primary, currentColor)); opacity: var(--sd-do, 1); translate: calc(var(--_ax) + var(--sd-dx, 0px)) calc(var(--_ay) + var(--sd-dy, 0px)); rotate: var(--sd-dr, 0deg); pointer-events: none; line-height: 0; } .sd-decor.is-layer-back { z-index: -1; } /* two classes: the placement layers below use one */ .sd-decor.is-layer-front { z-index: 1; } .sd-decor.is-decor-line { height: 2px; } .sd-decor.is-decor-ellipse { height: calc(var(--_ds-now) * 0.6); } .sd-decor > svg, .sd-decor > .sd-decor__img { display: block; width: 100%; height: 100%; } .sd-decor > .sd-decor__img { object-fit: contain; } .sd-decor.is-anchor-top-left { top: 0; left: 0; } .sd-decor.is-anchor-top-center { top: 0; left: 50%; --_ax: -50%; } .sd-decor.is-anchor-top-right { top: 0; right: 0; } .sd-decor.is-anchor-center-left { top: 50%; left: 0; --_ay: -50%; } .sd-decor.is-anchor-center { top: 50%; left: 50%; --_ax: -50%; --_ay: -50%; } .sd-decor.is-anchor-center-right { top: 50%; right: 0; --_ay: -50%; } .sd-decor.is-anchor-bottom-left { bottom: 0; left: 0; } .sd-decor.is-anchor-bottom-center { bottom: 0; left: 50%; --_ax: -50%; } .sd-decor.is-anchor-bottom-right { bottom: 0; right: 0; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-decor { --_ds-now: var(--sd-ds-tablet, var(--_ds)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-decor { --_ds-now: var(--sd-ds-mobile, var(--sd-ds-tablet, var(--_ds))); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-decor.is-hidden-mobile { display: none; } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .wp-block-buttons.is-sd-stack-mobile { flex-direction: column; align-items: stretch; } :where(body:not(.sd-force-desktop)) .wp-block-buttons.is-sd-stack-mobile > .wp-block-button { width: 100%; } :where(body:not(.sd-force-desktop)) .wp-block-buttons.is-sd-stack-mobile .wp-block-button__link { width: 100%; box-sizing: border-box; } } /* ---- 0.10.0: Section rules, placed badges, equal-height cards, grid dividers ---- */ .sd-section.has-sd-bt { border-top: var(--sd-bt-w) solid var(--sd-bt-c, currentColor); } .sd-section.has-sd-bb { border-bottom: var(--sd-bb-w) solid var(--sd-bb-c, currentColor); } /* A Stack placed on a corner of its parent Stack (a label over a photo). Stays in reading order. */ .sd-stack:has(> .is-placed) { position: relative; } .sd-stack.is-placed { position: absolute !important; z-index: 2; width: auto !important; max-width: calc(100% - 2 * var(--wp--preset--spacing--30)); margin: 0 !important; } .sd-stack.is-placed-top-left { top: var(--wp--preset--spacing--30); left: var(--wp--preset--spacing--30); } .sd-stack.is-placed-top-right { top: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30); } .sd-stack.is-placed-bottom-left { bottom: var(--wp--preset--spacing--30); left: var(--wp--preset--spacing--30); } .sd-stack.is-placed-bottom-right { bottom: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30); } /* Equal heights in a row, with the last item (a link or button) pushed to the bottom. */ .sd-stack.is-sd-fill { height: 100%; box-sizing: border-box; } .sd-stack.is-sd-pin-last > :last-child { margin-block-start: auto; } /* Grid dividers: lines between rows (lists) and / or between columns (one-row grids). The gap is * split on either side of the line. */ .sd-grid.has-sd-dividers { --_div: var(--sd-div-w, 1px) solid var(--sd-div-c, currentColor); } .sd-grid.is-dividers-rows, .sd-grid.is-dividers-both { row-gap: 0 !important; } .sd-grid.is-dividers-rows > *, .sd-grid.is-dividers-both > * { padding-block: calc(var(--sd-gapy, var(--sd-gap, var(--wp--preset--spacing--40))) / 2); } .sd-grid.is-dividers-rows > :not(.sd-deco):has(~ :not(.sd-deco)), .sd-grid.is-dividers-both > :not(.sd-deco):has(~ :not(.sd-deco)) { border-block-end: var(--_div); } .sd-grid.is-dividers-cols > :not(:first-child, .sd-deco), .sd-grid.is-dividers-both > :not(:first-child, .sd-deco) { border-inline-start: var(--_div); padding-inline-start: calc(var(--_cg-now) / 2); } .sd-grid.is-dividers-cols, .sd-grid.is-dividers-both { column-gap: calc(var(--_cg-now) / 2) !important; } /* ---- 0.11.0: masonry grids, hover effects, reveal on scroll ---- */ .sd-grid.is-masonry { --_mcols: var(--sd-mcols, 3); --_mcols-now: var(--_mcols); display: block; columns: var(--_mcols-now); column-gap: var(--_cg-now); } .sd-grid.is-masonry > * { break-inside: avoid; margin-block: 0 var(--sd-gapy, var(--sd-gap, var(--wp--preset--spacing--40))); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-grid.is-masonry { --_mcols-now: var(--sd-mcols-tablet, var(--_mcols)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-grid.is-masonry { --_mcols-now: var(--sd-mcols-mobile, var(--sd-mcols-tablet, var(--_mcols))); } } /* Hover: lift, glow, or a slow zoom of the background photo. Keyboard focus inside counts. */ .sd-stack.is-hover-zoom-bg { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .sd-stack.is-hover-lift, .sd-stack.is-hover-glow { transition: transform 0.2s ease, box-shadow 0.2s ease; } .sd-stack.is-hover-zoom-bg > .sd-bg { transition: transform 0.4s ease; } .sd-stack.is-hover-lift:is(:hover, :focus-within) { transform: translateY(-4px); } .sd-stack.is-hover-zoom-bg:is(:hover, :focus-within) > .sd-bg { transform: scale(1.05); } } .sd-stack.is-hover-lift:is(:hover, :focus-within) { box-shadow: var(--wp--preset--shadow--md); } .sd-stack.is-hover-glow:is(:hover, :focus-within) { box-shadow: var(--wp--preset--shadow--glow); } /* * Reveal on scroll. Only hidden once the page script has run (html.sd-reveal-on), so content is * always visible without JavaScript, in the editor, and for reduced motion. Opacity and * transform only: no layout shift. */ @media (prefers-reduced-motion: no-preference) { html.sd-reveal-on .has-sd-reveal:not(.is-revealed) { opacity: 0; } html.sd-reveal-on .has-sd-reveal.is-reveal-up:not(.is-revealed) { transform: translateY(1.5rem); } html.sd-reveal-on .has-sd-reveal.is-reveal-left:not(.is-revealed) { transform: translateX(-1.5rem); } html.sd-reveal-on .has-sd-reveal.is-reveal-right:not(.is-revealed) { transform: translateX(1.5rem); } html.sd-reveal-on .has-sd-reveal { transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--sd-reveal-delay, 0ms); } } /* ==== 0.15: layout power (includes/layout-ext.php, src/shared/layout.js) ===================== * Public --sd-* values don't inherit; each element reads private copies, and the screen * breakpoints switch the Tablet / Mobile value. */ .has-sd-pos { --_pos: var(--sd-pos, static); --_pos-now: var(--_pos); --_ox: var(--sd-ox, 0px); --_ox-now: var(--_ox); --_oy: var(--sd-oy, 0px); --_oy-now: var(--_oy); } .has-sd-move { --_sx: var(--sd-sx, 0px); --_sx-now: var(--_sx); --_sy: var(--sd-sy, 0px); --_sy-now: var(--_sy); } .has-sd-w { --_w: var(--sd-w); --_w-now: var(--_w); } .has-sd-h { --_h: var(--sd-h); --_h-now: var(--_h); } .has-sd-basis { --_basis: var(--sd-basis); --_basis-now: var(--_basis); } .has-sd-bleed { --_bls: var(--sd-bls, 0); --_bls-now: var(--_bls); --_ble: var(--sd-ble, 0); --_ble-now: var(--_ble); } .has-sd-ovt { --_ovt: var(--sd-ovt); --_ovt-now: var(--_ovt); } .has-sd-ovb { --_ovb: var(--sd-ovb); --_ovb-now: var(--_ovb); } .has-sd-ovs { --_ovs: var(--sd-ovs); --_ovs-now: var(--_ovs); } .has-sd-ove { --_ove: var(--sd-ove); --_ove-now: var(--_ove); } .has-sd-ta { --_ta: var(--sd-ta, start); --_ta-now: var(--_ta); --_tj: var(--sd-tj, flex-start); --_tj-now: var(--_tj); --_tm: var(--sd-tm, 0 auto); --_tm-now: var(--_tm); } .has-sd-spt { --_spt: var(--sd-spt); --_spt-now: var(--_spt); } .has-sd-spr { --_spr: var(--sd-spr); --_spr-now: var(--_spr); } .has-sd-spb { --_spb: var(--sd-spb); --_spb-now: var(--_spb); } .has-sd-spl { --_spl: var(--sd-spl); --_spl-now: var(--_spl); } .has-sd-inset { --_inset: var(--sd-inset); --_inset-now: var(--_inset); } .has-sd-imgh { --_imgh: var(--sd-imgh); --_imgh-now: var(--_imgh); } .has-sd-fs { --_fs: var(--sd-fs); --_fs-now: var(--_fs); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-pos { --_pos-now: var(--sd-pos-tablet, var(--_pos)); --_ox-now: var(--sd-ox-tablet, var(--_ox)); --_oy-now: var(--sd-oy-tablet, var(--_oy)); } :where(body:not(.sd-force-desktop)) .has-sd-move { --_sx-now: var(--sd-sx-tablet, var(--_sx)); --_sy-now: var(--sd-sy-tablet, var(--_sy)); } :where(body:not(.sd-force-desktop)) .has-sd-w { --_w-now: var(--sd-w-tablet, var(--_w)); } :where(body:not(.sd-force-desktop)) .has-sd-h { --_h-now: var(--sd-h-tablet, var(--_h)); } :where(body:not(.sd-force-desktop)) .has-sd-basis { --_basis-now: var(--sd-basis-tablet, var(--_basis)); } :where(body:not(.sd-force-desktop)) .has-sd-bleed { --_bls-now: var(--sd-bls-tablet, var(--_bls)); --_ble-now: var(--sd-ble-tablet, var(--_ble)); } :where(body:not(.sd-force-desktop)) .has-sd-ovt { --_ovt-now: var(--sd-ovt-tablet, var(--_ovt)); } :where(body:not(.sd-force-desktop)) .has-sd-ovb { --_ovb-now: var(--sd-ovb-tablet, var(--_ovb)); } :where(body:not(.sd-force-desktop)) .has-sd-ovs { --_ovs-now: var(--sd-ovs-tablet, var(--_ovs)); } :where(body:not(.sd-force-desktop)) .has-sd-ove { --_ove-now: var(--sd-ove-tablet, var(--_ove)); } :where(body:not(.sd-force-desktop)) .has-sd-ta { --_ta-now: var(--sd-ta-tablet, var(--_ta)); --_tj-now: var(--sd-tj-tablet, var(--_tj)); --_tm-now: var(--sd-tm-tablet, var(--_tm)); } :where(body:not(.sd-force-desktop)) .has-sd-spt { --_spt-now: var(--sd-spt-tablet, var(--_spt)); } :where(body:not(.sd-force-desktop)) .has-sd-spr { --_spr-now: var(--sd-spr-tablet, var(--_spr)); } :where(body:not(.sd-force-desktop)) .has-sd-spb { --_spb-now: var(--sd-spb-tablet, var(--_spb)); } :where(body:not(.sd-force-desktop)) .has-sd-spl { --_spl-now: var(--sd-spl-tablet, var(--_spl)); } :where(body:not(.sd-force-desktop)) .has-sd-inset { --_inset-now: var(--sd-inset-tablet, var(--_inset)); } :where(body:not(.sd-force-desktop)) .has-sd-imgh { --_imgh-now: var(--sd-imgh-tablet, var(--_imgh)); } :where(body:not(.sd-force-desktop)) .has-sd-fs { --_fs-now: var(--sd-fs-tablet, var(--_fs)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-pos { --_pos-now: var(--sd-pos-mobile, var(--sd-pos-tablet, var(--_pos))); --_ox-now: var(--sd-ox-mobile, var(--sd-ox-tablet, var(--_ox))); --_oy-now: var(--sd-oy-mobile, var(--sd-oy-tablet, var(--_oy))); } :where(body:not(.sd-force-desktop)) .has-sd-move { --_sx-now: var(--sd-sx-mobile, var(--sd-sx-tablet, var(--_sx))); --_sy-now: var(--sd-sy-mobile, var(--sd-sy-tablet, var(--_sy))); } :where(body:not(.sd-force-desktop)) .has-sd-w { --_w-now: var(--sd-w-mobile, var(--sd-w-tablet, var(--_w))); } :where(body:not(.sd-force-desktop)) .has-sd-h { --_h-now: var(--sd-h-mobile, var(--sd-h-tablet, var(--_h))); } :where(body:not(.sd-force-desktop)) .has-sd-basis { --_basis-now: var(--sd-basis-mobile, var(--sd-basis-tablet, var(--_basis))); } :where(body:not(.sd-force-desktop)) .has-sd-bleed { --_bls-now: var(--sd-bls-mobile, var(--sd-bls-tablet, var(--_bls))); --_ble-now: var(--sd-ble-mobile, var(--sd-ble-tablet, var(--_ble))); } :where(body:not(.sd-force-desktop)) .has-sd-ovt { --_ovt-now: var(--sd-ovt-mobile, var(--sd-ovt-tablet, var(--_ovt))); } :where(body:not(.sd-force-desktop)) .has-sd-ovb { --_ovb-now: var(--sd-ovb-mobile, var(--sd-ovb-tablet, var(--_ovb))); } :where(body:not(.sd-force-desktop)) .has-sd-ovs { --_ovs-now: var(--sd-ovs-mobile, var(--sd-ovs-tablet, var(--_ovs))); } :where(body:not(.sd-force-desktop)) .has-sd-ove { --_ove-now: var(--sd-ove-mobile, var(--sd-ove-tablet, var(--_ove))); } :where(body:not(.sd-force-desktop)) .has-sd-ta { --_ta-now: var(--sd-ta-mobile, var(--sd-ta-tablet, var(--_ta))); --_tj-now: var(--sd-tj-mobile, var(--sd-tj-tablet, var(--_tj))); --_tm-now: var(--sd-tm-mobile, var(--sd-tm-tablet, var(--_tm))); } :where(body:not(.sd-force-desktop)) .has-sd-spt { --_spt-now: var(--sd-spt-mobile, var(--sd-spt-tablet, var(--_spt))); } :where(body:not(.sd-force-desktop)) .has-sd-spr { --_spr-now: var(--sd-spr-mobile, var(--sd-spr-tablet, var(--_spr))); } :where(body:not(.sd-force-desktop)) .has-sd-spb { --_spb-now: var(--sd-spb-mobile, var(--sd-spb-tablet, var(--_spb))); } :where(body:not(.sd-force-desktop)) .has-sd-spl { --_spl-now: var(--sd-spl-mobile, var(--sd-spl-tablet, var(--_spl))); } :where(body:not(.sd-force-desktop)) .has-sd-inset { --_inset-now: var(--sd-inset-mobile, var(--sd-inset-tablet, var(--_inset))); } :where(body:not(.sd-force-desktop)) .has-sd-imgh { --_imgh-now: var(--sd-imgh-mobile, var(--sd-imgh-tablet, var(--_imgh))); } :where(body:not(.sd-force-desktop)) .has-sd-fs { --_fs-now: var(--sd-fs-mobile, var(--sd-fs-tablet, var(--_fs))); } } /* ---- Position and layer. "overlay" is absolute inside the nearest positioned parent; it stays * in reading order. "flow" keeps it in the flow (phones). No JavaScript, no layout shift. */ .has-sd-pos, .block-editor-block-list__layout .block-editor-block-list__block.has-sd-pos { position: var(--_pos-now); } /* The editor sets its blocks to relative. */ .has-sd-pos.is-anchor-top-left { top: calc(var(--_oy-now) * var(--_ps-now)); left: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-top-center { top: calc(var(--_oy-now) * var(--_ps-now)); left: calc(50% * var(--_ps-now) + calc(var(--_ox-now) * var(--_ps-now))); --_tx: calc(-50% * var(--_ps-now)); } .has-sd-pos.is-anchor-top-right { top: calc(var(--_oy-now) * var(--_ps-now)); right: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-center-left { top: calc(50% * var(--_ps-now) + calc(var(--_oy-now) * var(--_ps-now))); left: calc(var(--_ox-now) * var(--_ps-now)); --_ty: calc(-50% * var(--_ps-now)); } .has-sd-pos.is-anchor-center { top: calc(50% * var(--_ps-now) + calc(var(--_oy-now) * var(--_ps-now))); left: calc(50% * var(--_ps-now) + calc(var(--_ox-now) * var(--_ps-now))); --_tx: calc(-50% * var(--_ps-now)); --_ty: calc(-50% * var(--_ps-now)); } .has-sd-pos.is-anchor-center-right { top: calc(50% * var(--_ps-now) + calc(var(--_oy-now) * var(--_ps-now))); right: calc(var(--_ox-now) * var(--_ps-now)); --_ty: calc(-50% * var(--_ps-now)); } .has-sd-pos.is-anchor-bottom-left { bottom: calc(var(--_oy-now) * var(--_ps-now)); left: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-bottom-center { bottom: calc(var(--_oy-now) * var(--_ps-now)); left: calc(50% * var(--_ps-now) + calc(var(--_ox-now) * var(--_ps-now))); --_tx: calc(-50% * var(--_ps-now)); } .has-sd-pos.is-anchor-bottom-right { right: calc(var(--_ox-now) * var(--_ps-now)); bottom: calc(var(--_oy-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-top-stretch { top: calc(var(--_oy-now) * var(--_ps-now)); right: calc(var(--_ox-now) * var(--_ps-now)); left: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-bottom-stretch { right: calc(var(--_ox-now) * var(--_ps-now)); bottom: calc(var(--_oy-now) * var(--_ps-now)); left: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-left-stretch { top: calc(var(--_oy-now) * var(--_ps-now)); bottom: calc(var(--_oy-now) * var(--_ps-now)); left: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-right-stretch { top: calc(var(--_oy-now) * var(--_ps-now)); right: calc(var(--_ox-now) * var(--_ps-now)); bottom: calc(var(--_oy-now) * var(--_ps-now)); } .has-sd-pos.is-anchor-fill { top: calc(var(--_oy-now) * var(--_ps-now)); right: calc(var(--_ox-now) * var(--_ps-now)); bottom: calc(var(--_oy-now) * var(--_ps-now)); left: calc(var(--_ox-now) * var(--_ps-now)); } .has-sd-move { translate: calc(var(--_tx, 0%) + var(--_sx-now, 0px)) calc(var(--_ty, 0%) + var(--_sy-now, 0px)); rotate: var(--sd-rotate, 0deg); } .has-sd-w { width: var(--_w-now); max-width: none; flex-shrink: 0; box-sizing: border-box; } .has-sd-h { height: var(--_h-now); } .is-layer-back { z-index: 0; } .is-layer-base { z-index: 1; } .is-layer-front { z-index: 2; } .is-layer-top { z-index: 3; } /* Anchors and offsets act only where it is Absolute (--_ps-now 1); Relative / Default leave it in place. * The positioned context: only parents that have an overlay child (0.36: core containers too). */ :is(.sd-stack, .sd-section, .sd-grid, .sd-grid > *, .sd-position, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover__inner-container, .wp-block-media-text__content, .wp-block-post, .wp-block-post-content, .wp-block-buttons, .wp-block-quote, .wp-block-list, .wp-block-details, .sd-carousel__track > *, .sd-tabs__panel, .sd-modal__body, .sd-icon-list):has(> .is-sd-overlay):not(.is-sd-overlay, .is-placed), :is(.sd-stack, .sd-grid > *):has(> .is-placed):not(.is-sd-overlay, .is-placed) { position: relative; isolation: isolate; } /* An overlay child ignores the parent's gaps and a Section's content column: it's placed by * its anchor and offsets only. */ .has-sd-pos { --_ps: var(--sd-ps, 0); --_ps-now: var(--_ps); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-pos { --_ps-now: var(--sd-ps-tablet, var(--_ps)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-pos { --_ps-now: var(--sd-ps-mobile, var(--sd-ps-tablet, var(--_ps))); } } /* Only on the devices where it's over the parent (is-sd-ov-d / -t / -m, 0.45.1): in a Section it * covers the Section (full track); a Stack's gaps and core layouts' margins don't move it. On the * other devices it keeps its normal place in the flow. Each band is exclusive, so nothing undoes. */ @media not (width < 1024px) { :where(body) .sd-stack > .is-sd-ov-d { margin: 0; } :where(body) :is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > .is-sd-ov-d { margin: 0 !important; } :where(body) .sd-section > :where(.is-sd-ov-d) { grid-column: full; justify-self: stretch; width: auto; margin: 0; } :where(body) .sd-pill.is-sd-ov-d:not(.is-width-full) { width: max-content; max-width: calc(100% - 1rem); } :where(body) .sd-position.is-sd-ov-d:where(.has-sd-measure) { margin-inline: 0; } } :where(body.sd-force-desktop) .sd-stack > .is-sd-ov-d { margin: 0; } :where(body.sd-force-desktop) :is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > .is-sd-ov-d { margin: 0 !important; } :where(body.sd-force-desktop) .sd-section > :where(.is-sd-ov-d) { grid-column: full; justify-self: stretch; width: auto; margin: 0; } :where(body.sd-force-desktop) .sd-pill.is-sd-ov-d:not(.is-width-full) { width: max-content; max-width: calc(100% - 1rem); } :where(body.sd-force-desktop) .sd-position.is-sd-ov-d:where(.has-sd-measure) { margin-inline: 0; } @media (width < 1024px) and (not (width < 640px)) { :where(body:not(.sd-force-desktop)) .sd-stack > .is-sd-ov-t { margin: 0; } :where(body:not(.sd-force-desktop)) :is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > .is-sd-ov-t { margin: 0 !important; } :where(body:not(.sd-force-desktop)) .sd-section > :where(.is-sd-ov-t) { grid-column: full; justify-self: stretch; width: auto; margin: 0; } :where(body:not(.sd-force-desktop)) .sd-pill.is-sd-ov-t:not(.is-width-full) { width: max-content; max-width: calc(100% - 1rem); } :where(body:not(.sd-force-desktop)) .sd-position.is-sd-ov-t:where(.has-sd-measure) { margin-inline: 0; } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-stack > .is-sd-ov-m { margin: 0; } :where(body:not(.sd-force-desktop)) :is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > .is-sd-ov-m { margin: 0 !important; } :where(body:not(.sd-force-desktop)) .sd-section > :where(.is-sd-ov-m) { grid-column: full; justify-self: stretch; width: auto; margin: 0; } :where(body:not(.sd-force-desktop)) .sd-pill.is-sd-ov-m:not(.is-width-full) { width: max-content; max-width: calc(100% - 1rem); } :where(body:not(.sd-force-desktop)) .sd-position.is-sd-ov-m:where(.has-sd-measure) { margin-inline: 0; } } /* Nothing a Section holds (shifted, bleeding or hanging items) makes the page scroll sideways. */ .sd-section { overflow-x: clip; } .sd-section.is-sd-clip { overflow: clip; } /* Clip: photos flush in rounded cards, badges cut at the edge, zoom on hover. */ .is-sd-clip { overflow: clip; } /* ---- Sizing inside rows ---- */ .is-sd-grow { flex: 1 1 0%; min-width: 0; } .has-sd-basis { flex-basis: var(--_basis-now); } .sd-divider-rule.is-sd-grow { width: auto; align-self: center; } /* ---- Group text alignment: headings, paragraphs, lists inherit it; button rows, icons, images, * dividers and text columns follow it. A child's own alignment still wins. */ .has-sd-ta { text-align: var(--_ta-now); } .has-sd-ta > .wp-block-buttons { justify-content: var(--_tj-now); } .has-sd-ta > :where(.sd-icon, .sd-divider-rule, .wp-block-image.has-sd-media, .has-sd-text-measure, .sd-rating) { margin-inline: var(--_tm-now); } /* 0.45.2: a Stack or Grid with a maximum width follows its Stack's left / centre / right (Position in its area still wins). In a Section it stays where the Section puts it. */ .sd-stack.has-sd-ta > :where(.sd-stack.has-sd-measure, .sd-grid.has-sd-measure) { margin-inline: var(--_tm-now); } .has-sd-ta > .sd-rating { display: flex; width: max-content; } /* ---- 0.23: a text block's own alignment per device. One class per device that is set, so an * unset device keeps core's (has-text-align-*) or the parent's alignment; the tablet rule also * holds on phones unless a phone value follows. !important because core's `:root .has-text-align-*` * (0,2,0) must lose to a per-device choice, like the image alignment classes above. Button rows * justify instead. */ .has-sd-tar { text-align: var(--sd-tar) !important; } .wp-block-buttons.has-sd-tar { justify-content: var(--sd-tarj) !important; } /* 0.46 (SD Editor request): a heading or paragraph that is a flex row (import CSS puts eyebrow lines beside the text that way) follows its alignment too; justify-content does nothing on normal text. Id strength beats import rules of any length. */ :where(p, h1, h2, h3, h4, h5, h6).has-text-align-left:not(#_) { justify-content: flex-start; } :where(p, h1, h2, h3, h4, h5, h6).has-text-align-center:not(#_) { justify-content: center; } :where(p, h1, h2, h3, h4, h5, h6).has-text-align-right:not(#_) { justify-content: flex-end; } :where(p, h1, h2, h3, h4, h5, h6).has-sd-tar:not(#_) { justify-content: var(--sd-tar); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-tar-tablet { text-align: var(--sd-tar-tablet) !important; } :where(body:not(.sd-force-desktop)) .wp-block-buttons.has-sd-tar-tablet { justify-content: var(--sd-tarj-tablet) !important; } :where(body:not(.sd-force-desktop)) :where(p, h1, h2, h3, h4, h5, h6).has-sd-tar-tablet:not(#_) { justify-content: var(--sd-tar-tablet); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-tar-mobile { text-align: var(--sd-tar-mobile) !important; } :where(body:not(.sd-force-desktop)) .wp-block-buttons.has-sd-tar-mobile { justify-content: var(--sd-tarj-mobile) !important; } :where(body:not(.sd-force-desktop)) :where(p, h1, h2, h3, h4, h5, h6).has-sd-tar-mobile:not(#_) { justify-content: var(--sd-tar-mobile); } } /* ---- Padding per side (Stack): wins over pad / padX / padY for that side. */ :is(.sd-stack, .sd-position).has-sd-spt { padding-top: var(--_spt-now); } :is(.sd-stack, .sd-position).has-sd-spr { padding-right: var(--_spr-now); } :is(.sd-stack, .sd-position).has-sd-spb { padding-bottom: var(--_spb-now); } :is(.sd-stack, .sd-position).has-sd-spl { padding-left: var(--_spl-now); } /* ---- Bleed: to the screen edge on that side, past the content width. The Section clips the * scrollbar's few pixels (overflow-x: clip keeps sticky and vertical overlap working). */ .has-sd-bleed { --_bleed-amt: max(0px, (100vw - min(var(--_content, 100vw), 100vw - 2 * var(--_gutter, 0px))) / 2); margin-inline-start: calc(var(--_bls-now) * -1 * var(--_bleed-amt)) !important; margin-inline-end: calc(var(--_ble-now) * -1 * var(--_bleed-amt)) !important; max-width: none !important; } :where(.sd-section > .alignwide) { --_content: var(--wp--style--global--wide-size, 80rem); } /* ---- Overlap: negative margins per side, drawn above what it overlaps. */ .has-sd-overlap { position: relative; z-index: 1; } .has-sd-ovt { margin-block-start: calc(var(--_ovt-now) * -1) !important; } .has-sd-ovb { margin-block-end: calc(var(--_ovb-now) * -1) !important; } .has-sd-ovs { margin-inline-start: calc(var(--_ovs-now) * -1) !important; } .has-sd-ove { margin-inline-end: calc(var(--_ove-now) * -1) !important; } /* ---- Section inset and radius: a rounded band with side margins. Backgrounds, video and the * overlay follow the corners. */ .sd-section.has-sd-inset { --_rootpad-l: 0px; --_rootpad-r: 0px; margin-inline: calc(var(--_inset-now) - var(--_rootpad-l)) calc(var(--_inset-now) - var(--_rootpad-r)) !important; width: auto; max-width: none; } .has-global-padding > .sd-section.alignfull.has-sd-inset { --_rootpad-l: var(--wp--style--root--padding-left, 0px); --_rootpad-r: var(--wp--style--root--padding-right, 0px); } .sd-section.has-sd-radius { overflow: clip; } .sd-section.has-sd-radius > .sd-deco, .sd-section.has-sd-radius::before { border-radius: inherit; } /* ---- Images: focal point, fixed height, fill the cell. */ .wp-block-image.has-sd-focal { --_focal: var(--sd-focal); } .wp-block-image.has-sd-focal img { object-position: var(--_focal); } /* Heights !important: the block editor puts style="height: auto" on the img (and so does a saved * resize), which beat these and left the photo at its natural height. */ .wp-block-image.has-sd-imgh img { width: 100%; height: var(--_imgh-now) !important; object-fit: cover; } .wp-block-image.is-sd-img-fill { align-self: stretch; flex: 1 1 auto; height: 100%; min-height: 0; } .wp-block-image.is-sd-img-fill img { width: 100%; height: 100% !important; object-fit: cover; } .wp-block-image.has-sd-imgh.is-sd-fit-contain img, .wp-block-image.is-sd-img-fill.is-sd-fit-contain img { object-fit: contain; } /* ---- Exact font size (not fluid unless the value is a clamp()): beats the preset class. */ .has-sd-fs.has-sd-fs { font-size: var(--_fs-now) !important; } /* ---- Min height is the whole box (0.15.2): padding counts, so a 100svh Section is one screen * tall, not one screen plus its padding. */ .sd-section.has-sd-minh, .sd-stack.has-sd-minh { box-sizing: border-box; } /* A screen-height Section (100svh, 100vh…) that starts inside the first screen, below the header, * leaves that room, so header + hero = one screen. Under a transparent header it starts at the * top, so nothing is taken off. --sd-screen-top (where it starts) is measured before the first paint. */ @property --sd-scr { syntax: '*'; inherits: false; } @property --sd-scr-tablet { syntax: '*'; inherits: false; } @property --sd-scr-mobile { syntax: '*'; inherits: false; } @property --sd-screen-top { syntax: '*'; inherits: false; } .sd-section.has-sd-screen { --_scr: var(--sd-scr, 0); --_scr-now: var(--_scr); min-height: calc(var(--_minh-now) - var(--_scr-now) * var(--sd-screen-top, 0px)); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-section.has-sd-screen { --_scr-now: var(--sd-scr-tablet, var(--_scr)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-section.has-sd-screen { --_scr-now: var(--sd-scr-mobile, var(--sd-scr-tablet, var(--_scr))); } } /* ---- 0.16: Pill (sd/pill) ---- * One tone drives four looks; core colour / border / type / spacing settings override them * (their classes and inline styles win). Size sets the default padding and type. */ @property --sd-pill-tone { syntax: '*'; inherits: false; } @property --sd-pill-on { syntax: '*'; inherits: false; } @property --sd-pill-radius { syntax: '*'; inherits: false; } @property --sd-pill-hbg { syntax: '*'; inherits: false; } @property --sd-pill-htx { syntax: '*'; inherits: false; } @property --sd-pill-ic { syntax: '*'; inherits: false; } @property --sd-gsc { syntax: '*'; inherits: false; } @property --sd-gsc-tablet { syntax: '*'; inherits: false; } @property --sd-gsc-mobile { syntax: '*'; inherits: false; } @property --sd-gsr { syntax: '*'; inherits: false; } @property --sd-gsr-tablet { syntax: '*'; inherits: false; } @property --sd-gsr-mobile { syntax: '*'; inherits: false; } @property --sd-gcs { syntax: '*'; inherits: false; } @property --sd-gcs-tablet { syntax: '*'; inherits: false; } @property --sd-gcs-mobile { syntax: '*'; inherits: false; } @property --sd-grs { syntax: '*'; inherits: false; } @property --sd-grs-tablet { syntax: '*'; inherits: false; } @property --sd-grs-mobile { syntax: '*'; inherits: false; } @property --sd-gord { syntax: '*'; inherits: false; } @property --sd-gord-tablet { syntax: '*'; inherits: false; } @property --sd-gord-mobile { syntax: '*'; inherits: false; } @property --sd-gcn { syntax: '*'; inherits: false; } @property --sd-gcn-tablet { syntax: '*'; inherits: false; } @property --sd-gcn-mobile { syntax: '*'; inherits: false; } @property --sd-rows { syntax: '*'; inherits: false; } @property --sd-rows-tablet { syntax: '*'; inherits: false; } @property --sd-rows-mobile { syntax: '*'; inherits: false; } @property --sd-arows { syntax: '*'; inherits: false; } @property --sd-arows-tablet { syntax: '*'; inherits: false; } @property --sd-arows-mobile { syntax: '*'; inherits: false; } @property --sd-ch { syntax: '*'; inherits: false; } @property --sd-ch-tablet { syntax: '*'; inherits: false; } @property --sd-ch-mobile { syntax: '*'; inherits: false; } @property --sd-cv { syntax: '*'; inherits: false; } @property --sd-cv-tablet { syntax: '*'; inherits: false; } @property --sd-cv-mobile { syntax: '*'; inherits: false; } @property --sd-cc { syntax: '*'; inherits: false; } @property --sd-cs { syntax: '*'; inherits: false; } @property --sd-ci { syntax: '*'; inherits: false; } .sd-pill { --_tone: var(--sd-pill-tone, var(--wp--preset--color--primary, currentColor)); --_on: var(--sd-pill-on, var(--wp--preset--color--primary-contrast, #fff)); display: flex; align-items: center; justify-content: center; gap: 0.45em; box-sizing: border-box; width: fit-content; max-width: 100%; padding: 0.4em 1em; border: 1px solid transparent; border-radius: var(--sd-pill-radius, 999px); font-size: 0.875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; text-align: center; text-decoration: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, filter 0.2s; } .sd-pill.is-size-sm { padding: 0.3em 0.75em; font-size: 0.75rem; } .sd-pill.is-size-lg { padding: 0.55em 1.35em; font-size: 1rem; } .sd-pill.is-variant-solid { background-color: var(--_tone); color: var(--_on); } .sd-pill.is-variant-soft { background-color: color-mix(in srgb, var(--_tone) 14%, transparent); color: var(--_tone); } .sd-pill.is-variant-outline { background-color: transparent; color: var(--_tone); border-color: currentColor; } .sd-pill.is-variant-glass { background-color: color-mix(in srgb, var(--_tone) 60%, transparent); color: #fff; border-color: rgb(255 255 255 / 0.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sd-pill.is-width-full { width: 100%; } /* Over a photo: as wide as its text (up to the parent), not squeezed by left: 50%. */ .sd-pill.has-sd-w { width: var(--_w-now); } .sd-pill.is-align-start { margin-inline: 0 auto !important; justify-content: flex-start; text-align: start; } .sd-pill.is-align-center { margin-inline: auto !important; } .sd-pill.is-align-end { margin-inline: auto 0 !important; justify-content: flex-end; text-align: end; } .sd-pill__dot { flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; } .sd-pill__icon { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; } .sd-pill__icon svg { width: 100%; height: 100%; fill: currentColor; } .sd-pill.has-sd-pill-ic { --_pill-ic: var(--sd-pill-ic); } /* 0.53: Icon colour */ .sd-pill.has-sd-pill-ic .sd-pill__icon { color: var(--_pill-ic); } a.sd-pill:hover:not(.has-sd-hover-bg, .has-sd-hover-text) { filter: brightness(1.1); } a.sd-pill.has-sd-hover-bg:hover { background: var(--sd-pill-hbg) !important; } a.sd-pill.has-sd-hover-text:hover { color: var(--sd-pill-htx) !important; } a.sd-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ==== 0.17: grid placement, grid padding, connectors (includes/grid-ext.php) ================= * Placement applies only to a Grid's direct children. The -now copies don't inherit, so a block * inside a placed item never picks up its span. */ @property --_gsc-now { syntax: '*'; inherits: false; } @property --_gsr-now { syntax: '*'; inherits: false; } @property --_gcs-now { syntax: '*'; inherits: false; } @property --_grs-now { syntax: '*'; inherits: false; } @property --_gord-now { syntax: '*'; inherits: false; } .sd-grid > .has-sd-gsc { --_gsc: var(--sd-gsc); --_gsc-now: var(--_gsc); } .sd-grid > .has-sd-gsr { --_gsr: var(--sd-gsr); --_gsr-now: var(--_gsr); } .sd-grid > .has-sd-gcs { --_gcs: var(--sd-gcs); --_gcs-now: var(--_gcs); } .sd-grid > .has-sd-grs { --_grs: var(--sd-grs); --_grs-now: var(--_grs); } .sd-grid > .has-sd-gord { --_gord: var(--sd-gord); --_gord-now: var(--_gord); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gsc { --_gsc-now: var(--sd-gsc-tablet, var(--_gsc)); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gsr { --_gsr-now: var(--sd-gsr-tablet, var(--_gsr)); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gcs { --_gcs-now: var(--sd-gcs-tablet, var(--_gcs)); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-grs { --_grs-now: var(--sd-grs-tablet, var(--_grs)); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gord { --_gord-now: var(--sd-gord-tablet, var(--_gord)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gsc { --_gsc-now: var(--sd-gsc-mobile, var(--sd-gsc-tablet, var(--_gsc))); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gsr { --_gsr-now: var(--sd-gsr-mobile, var(--sd-gsr-tablet, var(--_gsr))); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gcs { --_gcs-now: var(--sd-gcs-mobile, var(--sd-gcs-tablet, var(--_gcs))); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-grs { --_grs-now: var(--sd-grs-mobile, var(--sd-grs-tablet, var(--_grs))); } :where(body:not(.sd-force-desktop)) .sd-grid > .has-sd-gord { --_gord-now: var(--sd-gord-mobile, var(--sd-gord-tablet, var(--_gord))); } } /* A start line past the last column moves back to it; a span never runs past the last column. */ .sd-grid > .has-sd-gcs { grid-column-start: min(var(--_gcs-now), var(--_gcn-now)); } .sd-grid > .has-sd-gsc { grid-column-end: span max(1, min(var(--_gsc-now), var(--_gcn-now) + 1 - min(var(--_gcs-now, 1), var(--_gcn-now)))); } .sd-grid > .has-sd-grs { grid-row-start: var(--_grs-now); } .sd-grid > .has-sd-gsr { grid-row-end: span var(--_gsr-now); } .sd-grid > .has-sd-gord { order: var(--_gord-now); } /* Grid padding (a grid that is itself a panel). */ .sd-grid.has-sd-pad { --_gp: var(--sd-pad); --_gp-now: var(--_gp); padding: var(--_gp-now); box-sizing: border-box; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-pad { --_gp-now: var(--sd-pad-tablet, var(--_gp)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-pad { --_gp-now: var(--sd-pad-mobile, var(--sd-pad-tablet, var(--_gp))); } } /* Connectors: marks the Grid appends after its items, placed in item N's cell and drawn in the gap * after it. Across when all items fit in one row (--sd-ch), down with one column (--sd-cv), * hidden otherwise; the render decides per device. */ .sd-grid.has-sd-conn { position: relative; --_ch: var(--sd-ch, 0); --_ch-now: var(--_ch); --_cv: var(--sd-cv, 0); --_cv-now: var(--_cv); --_cc: var(--sd-cc, currentColor); --_cs: var(--sd-cs, 1.5rem); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-conn { --_ch-now: var(--sd-ch-tablet, var(--_ch)); --_cv-now: var(--sd-cv-tablet, var(--_cv)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-conn { --_ch-now: var(--sd-ch-mobile, var(--sd-ch-tablet, var(--_ch))); --_cv-now: var(--sd-cv-mobile, var(--sd-cv-tablet, var(--_cv))); } } .sd-grid__conn { position: absolute; grid-column: calc(var(--_ch-now) * (var(--sd-ci) - 1) + 1) / span 1; grid-row: calc(var(--_cv-now) * (var(--sd-ci) - 1) + 1) / span 1; left: calc(var(--_ch-now) * (100% + var(--_cg-now) / 2) + var(--_cv-now) * 50%); top: calc(var(--_ch-now) * 50% + var(--_cv-now) * (100% + var(--_rg-now) / 2)); width: var(--_cs); height: var(--_cs); translate: -50% -50%; rotate: calc(var(--_cv-now) * 90deg); scale: calc(var(--_ch-now) + var(--_cv-now)); background: var(--_cc); -webkit-mask: var(--_cm) center / contain no-repeat; mask: var(--_cm) center / contain no-repeat; pointer-events: none; } .sd-grid.is-conn-arrow { --_cm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .sd-grid.is-conn-chevron { --_cm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); } /* Line: the width of the gap; the size is its thickness. */ .sd-grid.is-conn-line { --_cs: var(--sd-cs, 2px); } .sd-grid.is-conn-line > .sd-grid__conn { width: calc(var(--_ch-now) * var(--_cg-now) + var(--_cv-now) * var(--_rg-now)); -webkit-mask: none; mask: none; } /* ==== 0.18: accordion styling (includes/accordion-ext.php) =================================== * Settings on core/accordion style every item. Rules use child combinators so a nested accordion * keeps its own settings. */ @property --sd-acc-ic { syntax: '*'; inherits: false; } @property --sd-acc-bw { syntax: '*'; inherits: false; } @property --sd-acc-bc { syntax: '*'; inherits: false; } @property --sd-acc-gap { syntax: '*'; inherits: false; } @property --sd-acc-gap-tablet { syntax: '*'; inherits: false; } @property --sd-acc-gap-mobile { syntax: '*'; inherits: false; } @property --sd-acc-hf { syntax: '*'; inherits: false; } @property --sd-acc-hw { syntax: '*'; inherits: false; } @property --sd-acc-hs { syntax: '*'; inherits: false; } @property --sd-acc-hs-tablet { syntax: '*'; inherits: false; } @property --sd-acc-hs-mobile { syntax: '*'; inherits: false; } @property --sd-acc-hc { syntax: '*'; inherits: false; } @property --sd-acc-mc { syntax: '*'; inherits: false; } @property --sd-acc-pp { syntax: '*'; inherits: false; } @property --sd-acc-pp-tablet { syntax: '*'; inherits: false; } @property --sd-acc-pp-mobile { syntax: '*'; inherits: false; } /* Defaults: a hairline in the text colour, no gap, the panel flush with the heading. */ .wp-block-accordion { --_acc-bw: var(--sd-acc-bw, var(--wp--custom--border--hairline, 1px)); --_acc-bc: var(--sd-acc-bc, color-mix(in srgb, currentColor 18%, transparent)); --_acc-gap: var(--sd-acc-gap, 0px); --_acc-gap-now: var(--_acc-gap); --_acc-pp: var(--sd-acc-pp, 0px); --_acc-pp-now: var(--_acc-pp); --_acc-hs: var(--sd-acc-hs); --_acc-hs-now: var(--_acc-hs); } .wp-block-accordion.is-sd-style-boxed { --_acc-gap: var(--sd-acc-gap, var(--wp--preset--spacing--30, 0.75rem)); --_acc-pp: var(--sd-acc-pp, var(--wp--preset--spacing--40, 1.25rem)); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .wp-block-accordion { --_acc-gap-now: var(--sd-acc-gap-tablet, var(--_acc-gap)); --_acc-pp-now: var(--sd-acc-pp-tablet, var(--_acc-pp)); --_acc-hs-now: var(--sd-acc-hs-tablet, var(--_acc-hs)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .wp-block-accordion { --_acc-gap-now: var(--sd-acc-gap-mobile, var(--sd-acc-gap-tablet, var(--_acc-gap))); --_acc-pp-now: var(--sd-acc-pp-mobile, var(--sd-acc-pp-tablet, var(--_acc-pp))); --_acc-hs-now: var(--sd-acc-hs-mobile, var(--sd-acc-hs-tablet, var(--_acc-hs))); } } /* Gap between items (also the styles' defaults). */ .wp-block-accordion:is(.has-sd-acc-gap, .is-sd-style-lines, .is-sd-style-boxed, .is-sd-style-plain) > .wp-block-accordion-item + .wp-block-accordion-item { margin-block-start: var(--_acc-gap-now); } /* Lines: a hairline above every item and below the last, with the panel text lifted off the line. * Divider sides override the lines; in a boxed accordion the divider only recolours the box. */ .wp-block-accordion.is-sd-style-lines > .wp-block-accordion-item { border-block-start: var(--_acc-bw) solid var(--_acc-bc); } .wp-block-accordion.is-sd-style-lines > .wp-block-accordion-item:last-child { border-block-end: var(--_acc-bw) solid var(--_acc-bc); } .wp-block-accordion.is-sd-style-lines:not(.has-sd-acc-pp) > .wp-block-accordion-item > .wp-block-accordion-panel { padding-block-end: var(--wp--preset--spacing--20, 1em); } .wp-block-accordion.has-sd-acc-div.is-sd-acc-sides-top:not(.is-sd-style-boxed) > .wp-block-accordion-item { border-block-start: var(--_acc-bw) solid var(--_acc-bc); border-block-end: 0 none; } .wp-block-accordion.has-sd-acc-div.is-sd-acc-sides-bottom:not(.is-sd-style-boxed) > .wp-block-accordion-item { border-block-start: 0 none; border-block-end: var(--_acc-bw) solid var(--_acc-bc); } .wp-block-accordion.has-sd-acc-div.is-sd-acc-sides-both:not(.is-sd-style-boxed) > .wp-block-accordion-item { border-block: var(--_acc-bw) solid var(--_acc-bc); } /* Boxed: each item an outlined card with inner padding. Plain: no lines at all. */ .wp-block-accordion.is-sd-style-boxed > .wp-block-accordion-item { border: var(--_acc-bw) solid var(--_acc-bc); border-radius: var(--wp--custom--radius--medium, 0.5rem); } .wp-block-accordion.is-sd-style-boxed > .wp-block-accordion-item > .wp-block-accordion-heading > .wp-block-accordion-heading__toggle { padding-inline: var(--_acc-pp-now); } .wp-block-accordion.is-sd-style-plain > .wp-block-accordion-item { border: 0; } /* Panel padding: sides and bottom (the heading's own padding spaces the top). */ .wp-block-accordion:is(.has-sd-acc-pp, .is-sd-style-boxed) > .wp-block-accordion-item > .wp-block-accordion-panel { padding: 0 var(--_acc-pp-now) var(--_acc-pp-now); } /* Heading type and colour, for every heading in the accordion. */ .wp-block-accordion.has-sd-acc-hf { --_acc-hf: var(--sd-acc-hf); } .wp-block-accordion.has-sd-acc-hw { --_acc-hw: var(--sd-acc-hw); } .wp-block-accordion.has-sd-acc-hc { --_acc-hc: var(--sd-acc-hc); } .wp-block-accordion.has-sd-acc-ic { --_acc-ic: var(--sd-acc-ic); } .wp-block-accordion.has-sd-acc-hf > .wp-block-accordion-item > .wp-block-accordion-heading { font-family: var(--_acc-hf); } .wp-block-accordion.has-sd-acc-hw > .wp-block-accordion-item > .wp-block-accordion-heading { font-weight: var(--_acc-hw); } .wp-block-accordion.has-sd-acc-hs > .wp-block-accordion-item > .wp-block-accordion-heading { font-size: var(--_acc-hs-now); } .wp-block-accordion.has-sd-acc-hc > .wp-block-accordion-item > .wp-block-accordion-heading { color: var(--_acc-hc); } /* 0.30: a mark before every heading (sdHeadIcon); its colour follows the heading unless set. */ .wp-block-accordion.has-sd-acc-mark { --_acc-mc: var(--sd-acc-mc, currentColor); } .wp-block-accordion .sd-acc-mark { display: inline-flex; flex: none; width: 1em; height: 1em; margin-inline-end: 0.5em; vertical-align: -0.125em; color: var(--_acc-mc); } .wp-block-accordion .sd-acc-mark > svg { width: 100%; height: 100%; fill: currentColor; } .wp-block-accordion.is-sd-head-case-uppercase > .wp-block-accordion-item > .wp-block-accordion-heading { text-transform: uppercase; } .wp-block-accordion.is-sd-head-case-capitalize > .wp-block-accordion-item > .wp-block-accordion-heading { text-transform: capitalize; } .wp-block-accordion.is-sd-head-case-none > .wp-block-accordion-item > .wp-block-accordion-heading { text-transform: none; } /* Icon: core's "+" glyph is kept (and hidden) so the markup never changes; the shape is a mask * in the heading's colour. Core rotates the icon 45° when open (plus → ×); the other shapes * turn their own way. */ .wp-block-accordion:is(.is-sd-icon-chevron, .is-sd-icon-plus, .is-sd-icon-plus-minus, .is-sd-icon-arrow) > .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { -webkit-text-fill-color: transparent; background: var(--_acc-ic, currentColor); -webkit-mask: var(--_acc-im) center / contain no-repeat; mask: var(--_acc-im) center / contain no-repeat; } .wp-block-accordion.is-sd-icon-chevron { --_acc-im: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .wp-block-accordion.is-sd-icon-plus, .wp-block-accordion.is-sd-icon-plus-minus { --_acc-im: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .wp-block-accordion.is-sd-icon-arrow { --_acc-im: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .wp-block-accordion.is-sd-icon-chevron > .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: rotate(180deg); } .wp-block-accordion.is-sd-icon-arrow > .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: rotate(90deg); } .wp-block-accordion.is-sd-icon-plus-minus > .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: none; --_acc-im: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } .wp-block-accordion.is-sd-icon-none > .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { display: none; } /* ---- 0.35: container parity ---- */ @property --sd-align-tablet { syntax: '*'; inherits: false; } @property --sd-align-mobile { syntax: '*'; inherits: false; } @property --sd-justify-tablet { syntax: '*'; inherits: false; } @property --sd-justify-mobile { syntax: '*'; inherits: false; } @property --sd-wrap-tablet { syntax: '*'; inherits: false; } @property --sd-wrap-mobile { syntax: '*'; inherits: false; } @property --sd-gji-tablet { syntax: '*'; inherits: false; } @property --sd-gji-mobile { syntax: '*'; inherits: false; } @property --sd-gac-tablet { syntax: '*'; inherits: false; } @property --sd-gac-mobile { syntax: '*'; inherits: false; } @property --sd-valign-tablet { syntax: '*'; inherits: false; } @property --sd-valign-mobile { syntax: '*'; inherits: false; } @property --sd-content-tablet { syntax: '*'; inherits: false; } @property --sd-content-mobile { syntax: '*'; inherits: false; } @property --sd-gji { syntax: '*'; inherits: false; } @property --sd-gac { syntax: '*'; inherits: false; } @property --sd-valign { syntax: '*'; inherits: false; } @property --sd-smt { syntax: '*'; inherits: false; } @property --sd-smt-tablet { syntax: '*'; inherits: false; } @property --sd-smt-mobile { syntax: '*'; inherits: false; } @property --sd-smr { syntax: '*'; inherits: false; } @property --sd-smr-tablet { syntax: '*'; inherits: false; } @property --sd-smr-mobile { syntax: '*'; inherits: false; } @property --sd-smb { syntax: '*'; inherits: false; } @property --sd-smb-tablet { syntax: '*'; inherits: false; } @property --sd-smb-mobile { syntax: '*'; inherits: false; } @property --sd-sml { syntax: '*'; inherits: false; } @property --sd-sml-tablet { syntax: '*'; inherits: false; } @property --sd-sml-mobile { syntax: '*'; inherits: false; } /* Margin per side and per device: Section, Stack, Grid, Position, and since 0.43 every block a * layout holds (includes/margin-ext.php). A margin you set wins over every default and alignment * setting (id strength + !important). Every device value follows the screen. */ .has-sd-smt { --_smt: var(--sd-smt); --_smt-now: var(--_smt); } .has-sd-smt:not(#_) { margin-top: var(--_smt-now) !important; } .has-sd-smr { --_smr: var(--sd-smr); --_smr-now: var(--_smr); } .has-sd-smr:not(#_) { margin-right: var(--_smr-now) !important; } .has-sd-smb { --_smb: var(--sd-smb); --_smb-now: var(--_smb); } .has-sd-smb:not(#_) { margin-bottom: var(--_smb-now) !important; } .has-sd-sml { --_sml: var(--sd-sml); --_sml-now: var(--_sml); } .has-sd-sml:not(#_) { margin-left: var(--_sml-now) !important; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-smt { --_smt-now: var(--sd-smt-tablet, var(--_smt)); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-smr { --_smr-now: var(--sd-smr-tablet, var(--_smr)); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-smb { --_smb-now: var(--sd-smb-tablet, var(--_smb)); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-sml { --_sml-now: var(--sd-sml-tablet, var(--_sml)); } } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-smt:not(.sd-stack, .sd-grid, .sd-position) { --_smt-now: var(--sd-smt-tablet, var(--_smt)); } :where(body:not(.sd-force-desktop)) .has-sd-smr:not(.sd-stack, .sd-grid, .sd-position) { --_smr-now: var(--sd-smr-tablet, var(--_smr)); } :where(body:not(.sd-force-desktop)) .has-sd-smb:not(.sd-stack, .sd-grid, .sd-position) { --_smb-now: var(--sd-smb-tablet, var(--_smb)); } :where(body:not(.sd-force-desktop)) .has-sd-sml:not(.sd-stack, .sd-grid, .sd-position) { --_sml-now: var(--sd-sml-tablet, var(--_sml)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-smt { --_smt-now: var(--sd-smt-mobile, var(--sd-smt-tablet, var(--_smt))); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-smr { --_smr-now: var(--sd-smr-mobile, var(--sd-smr-tablet, var(--_smr))); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-smb { --_smb-now: var(--sd-smb-mobile, var(--sd-smb-tablet, var(--_smb))); } :where(body:not(.sd-force-desktop)) :is(.sd-stack, .sd-grid, .sd-position).has-sd-sml { --_sml-now: var(--sd-sml-mobile, var(--sd-sml-tablet, var(--_sml))); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-smt:not(.sd-stack, .sd-grid, .sd-position) { --_smt-now: var(--sd-smt-mobile, var(--sd-smt-tablet, var(--_smt))); } :where(body:not(.sd-force-desktop)) .has-sd-smr:not(.sd-stack, .sd-grid, .sd-position) { --_smr-now: var(--sd-smr-mobile, var(--sd-smr-tablet, var(--_smr))); } :where(body:not(.sd-force-desktop)) .has-sd-smb:not(.sd-stack, .sd-grid, .sd-position) { --_smb-now: var(--sd-smb-mobile, var(--sd-smb-tablet, var(--_smb))); } :where(body:not(.sd-force-desktop)) .has-sd-sml:not(.sd-stack, .sd-grid, .sd-position) { --_sml-now: var(--sd-sml-mobile, var(--sd-sml-tablet, var(--_sml))); } } /* * 0.47: a side margin on a Section child narrower than its column (Text column width, a Stack, * Grid or Position with a maximum width, an Image with a size) no longer moves it sideways. * Before, the margin replaced the auto margin that placed it (a left-aligned text column jumped * towards the centre) or the Section centred width + margin together (a centred block moved by * half the margin). Now: * - a margin on the side the block is aligned to moves it in (Left on a left-aligned heading); * - a margin on the other side, or either side of a centred block, holds the opposite edge where * it was and narrows the block only when it runs out of room; * - both sides: the block keeps its alignment inside the space the two margins leave. * Each block says how wide it wants to be (--_hw), where it sits (--_hj) and the opposite margin * that holds its left / right edge (--_hl / --_hr). Percentages resolve against the Section * column, where the margins are used. The Section rules only apply when you set a side margin, * so like the margins themselves they win over every default (id strength). */ .has-sd-text-measure { --_hw: var(--sd-measure); --_hj: start; --_hl: 0px; --_hr: max(0px, 100% - var(--_hw) - var(--_sml-now, var(--_xml-now, 0px))); } .has-sd-text-measure.has-text-align-center { --_hj: center; --_hl: max(0px, (100% - var(--_hw)) / 2); --_hr: max(0px, (100% - var(--_hw)) / 2); } .has-sd-text-measure.has-text-align-right { --_hj: end; --_hl: max(0px, 100% - var(--_hw) - var(--_smr-now, var(--_xmr-now, 0px))); --_hr: 0px; } :is(.sd-stack, .sd-grid, .sd-position).has-sd-measure, .wp-block-image.has-sd-media { --_hw: var(--_measure-now); --_hj: center; --_hl: max(0px, (100% - var(--_hw)) / 2); --_hr: max(0px, (100% - var(--_hw)) / 2); } .wp-block-image.has-sd-media { --_hw: var(--_media-now); } .sd-stack.has-sd-measure.is-self-start { --_hj: start; --_hl: 0px; --_hr: max(0px, 100% - var(--_hw) - var(--_sml-now, var(--_xml-now, 0px))); } .sd-stack.has-sd-measure.is-self-end { --_hj: end; --_hl: max(0px, 100% - var(--_hw) - var(--_smr-now, var(--_xmr-now, 0px))); --_hr: 0px; } .sd-section > :is(.has-sd-text-measure, .sd-stack.has-sd-measure, .sd-grid.has-sd-measure, .sd-position.has-sd-measure, .wp-block-image.has-sd-media):is(.has-sd-smr, .has-sd-sml, [class*="has-sd-xmr"], [class*="has-sd-xml"]):not(#_) { width: -webkit-fill-available; width: -moz-available; width: stretch; max-width: min(var(--_hw), 100%); box-sizing: border-box; justify-self: var(--_hj); } .sd-section > :is(.has-sd-text-measure, .sd-stack.has-sd-measure, .sd-grid.has-sd-measure, .sd-position.has-sd-measure, .wp-block-image.has-sd-media):is(.has-sd-smr, [class*="has-sd-xmr"]):not(.has-sd-sml, [class*="has-sd-xml"]):not(#_) { justify-self: start; margin-left: var(--_hl) !important; } .sd-section > :is(.has-sd-text-measure, .sd-stack.has-sd-measure, .sd-grid.has-sd-measure, .sd-position.has-sd-measure, .wp-block-image.has-sd-media):is(.has-sd-sml, [class*="has-sd-xml"]):not(.has-sd-smr, [class*="has-sd-xmr"]):not(#_) { justify-self: end; margin-right: var(--_hr) !important; } /* Items at their own width (justifyItems): a size-contained cell would shrink to nothing, so the * cells stop being containers; layouts inside them follow the Grid's own area instead. */ .sd-grid.has-sd-gji > * { container: none; } /* Grid as a container: minimum height, maximum width, overlay over its background image. */ .sd-grid.has-sd-minh { --_minh: var(--sd-minh, auto); --_minh-now: var(--_minh); min-height: var(--_minh-now); box-sizing: border-box; } .sd-grid.has-sd-measure { --_measure: var(--sd-measure); --_measure-now: var(--_measure); max-width: min(var(--_measure-now), 100%) !important; box-sizing: border-box; } .sd-grid.has-sd-overlay { --_overlay: var(--sd-overlay, #000); --_overlay-opacity: var(--sd-overlay-opacity, 0.5); position: relative; isolation: isolate; } /* * The overlay layer of Section, Stack and Grid (0.45: one rule, unlayered, id strength). It is a * block setting, so outside CSS on the same pseudo-element can't hide it: import CSS that painted * a texture on .has-sd-overlay::before wiped out the overlay colour and opacity. Decorate with * ::after or a Decoration instead. */ :is(.sd-section, .sd-stack, .sd-grid).has-sd-overlay:not(#_)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--_overlay); opacity: var(--_overlay-opacity); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-minh { --_minh-now: var(--sd-minh-tablet, var(--_minh)); } :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-measure { --_measure-now: var(--sd-measure-tablet, var(--_measure)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-minh { --_minh-now: var(--sd-minh-mobile, var(--sd-minh-tablet, var(--_minh))); } :where(body:not(.sd-force-desktop)) .sd-grid.has-sd-measure { --_measure-now: var(--sd-measure-mobile, var(--sd-measure-tablet, var(--_measure))); } } /* ==== 0.37: borders per side, corner radius per device (includes/design.php) ================= * Any block: Stack, Grid, Section, the Position block and the blocks in includes/position-ext.php. * A block's own setting wins over its style and the theme (:not(#_) lifts the specificity). */ @property --sd-bs { syntax: '*'; inherits: false; } @property --sd-bwt { syntax: '*'; inherits: false; } @property --sd-bwr { syntax: '*'; inherits: false; } @property --sd-bwb { syntax: '*'; inherits: false; } @property --sd-bwl { syntax: '*'; inherits: false; } @property --sd-bct { syntax: '*'; inherits: false; } @property --sd-bcr { syntax: '*'; inherits: false; } @property --sd-bcb { syntax: '*'; inherits: false; } @property --sd-bcl { syntax: '*'; inherits: false; } @property --sd-radius-tablet { syntax: '*'; inherits: false; } @property --sd-radius-mobile { syntax: '*'; inherits: false; } .has-sd-bd:not(#_) { border-style: var(--sd-bs, solid); border-width: var(--sd-bwt, 0px) var(--sd-bwr, 0px) var(--sd-bwb, 0px) var(--sd-bwl, 0px); border-color: var(--sd-bct, currentColor) var(--sd-bcr, currentColor) var(--sd-bcb, currentColor) var(--sd-bcl, currentColor); } .has-sd-radius { --_rad: var(--sd-radius); --_rad-now: var(--_rad); } .has-sd-radius:not(#_, .wp-block-image) { border-radius: var(--_rad-now); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-radius:not(.sd-section) { --_rad-now: var(--sd-radius-tablet, var(--_rad)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-radius:not(.sd-section) { --_rad-now: var(--sd-radius-mobile, var(--sd-radius-tablet, var(--_rad))); } } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-section.has-sd-radius { --_rad-now: var(--sd-radius-tablet, var(--_rad)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-section.has-sd-radius { --_rad-now: var(--sd-radius-mobile, var(--sd-radius-tablet, var(--_rad))); } } /* Blocks whose box is inside: the border and corners go on it (tab panels, a carousel's viewport, * a modal's box; in the block editor the modal's content box). */ :is(.sd-tabs, .sd-carousel, .sd-modal).has-sd-bd:not(#_) { border: 0; } :is(.sd-tabs, .sd-carousel, .sd-modal).has-sd-radius:not(#_) { border-radius: 0; } :is(.sd-tabs, .sd-carousel, .sd-modal).has-sd-bd { --_bs: var(--sd-bs, solid); --_bwt: var(--sd-bwt, 0px); --_bwr: var(--sd-bwr, 0px); --_bwb: var(--sd-bwb, 0px); --_bwl: var(--sd-bwl, 0px); --_bct: var(--sd-bct, currentColor); --_bcr: var(--sd-bcr, currentColor); --_bcb: var(--sd-bcb, currentColor); --_bcl: var(--sd-bcl, currentColor); } :is(.sd-tabs.has-sd-bd .sd-tabs__panel, .sd-carousel.has-sd-bd > .sd-carousel__viewport, .sd-modal.has-sd-bd :is(.sd-modal__dialog, .sd-modal-editor__content)):not(#_) { border-style: var(--_bs); border-width: var(--_bwt) var(--_bwr) var(--_bwb) var(--_bwl); border-color: var(--_bct) var(--_bcr) var(--_bcb) var(--_bcl); } :is(.sd-tabs.has-sd-radius .sd-tabs__panel, .sd-carousel.has-sd-radius > .sd-carousel__viewport, .sd-modal.has-sd-radius :is(.sd-modal__dialog, .sd-modal-editor__content)):not(#_) { border-radius: var(--_rad-now); } /* Absolute and Relative: the block is the positioned parent of what is over it; a layer needs a position. */ :is(.is-layer-back, .is-layer-base, .is-layer-front, .is-layer-top):not(.has-sd-pos, .sd-decor, .sd-deco) { position: relative; } /* ---- 0.37: the Position block: a plain box (no look), size per device. */ .sd-position { box-sizing: border-box; } .sd-position.has-sd-minh { --_minh: var(--sd-minh, auto); --_minh-now: var(--_minh); min-height: var(--_minh-now); } .sd-position.has-sd-measure { --_measure: var(--sd-measure); --_measure-now: var(--_measure); max-width: min(var(--_measure-now), 100%); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-position.has-sd-minh { --_minh-now: var(--sd-minh-tablet, var(--_minh)); } :where(body:not(.sd-force-desktop)) .sd-position.has-sd-measure { --_measure-now: var(--sd-measure-tablet, var(--_measure)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-position.has-sd-minh { --_minh-now: var(--sd-minh-mobile, var(--sd-minh-tablet, var(--_minh))); } :where(body:not(.sd-force-desktop)) .sd-position.has-sd-measure { --_measure-now: var(--sd-measure-mobile, var(--sd-measure-tablet, var(--_measure))); } } .sd-position:where(.has-sd-measure) { margin-inline: auto; } /* ---- Background opacity (0.39, includes/bg-opacity.php) ---- * Colour: the block's background colour mixed with transparent; content stays solid. On the element * that has the colour (the block, a button's link, a table). Stack also fades its style's colour. */ .has-sd-bg-opacity { --_bgc: var(--sd-bg); --_bgo: var(--sd-bg-opacity); } .has-sd-bg-opacity:is(.has-background, .sd-stack):not(#_), .wp-block-button.has-sd-bg-opacity > .wp-block-button__link:not(#_), .wp-block-table.has-sd-bg-opacity > table:not(#_) { background-color: color-mix(in srgb, var(--_bgc) calc(var(--_bgo) * 100%), transparent) !important; } /* Image: an image or video element fades itself (Section / Stack photo and video, Cover). */ .has-sd-bgio { --_bgio: var(--sd-bgio); } .has-sd-bgio > :is(.sd-bg, .sd-section__video), .has-sd-bgio > .sd-picture > .sd-bg, .wp-block-cover.has-sd-bgio > :is(.wp-block-cover__image-background, .wp-block-cover__video-background, .wp-block-cover__embed-background) { opacity: var(--_bgio); } /* A CSS background (core paints it on the block) moves to a layer under the content: a .sd-bg span * on Section, Stack and Grid (has-sd-bgl), ::before on core blocks (has-sd-bgi). The block's own * background-image is hidden, so the photo loads once; the background colour stays. */ .has-sd-bgl:not(#_), .has-sd-bgi:not(#_) { background-image: none !important; } :where(.has-sd-bgl, .has-sd-bgi) { position: relative; } .has-sd-bgl, .has-sd-bgi { isolation: isolate; } .sd-bg--css:not(#_) { padding: 0; margin: 0; border: 0; box-sizing: border-box; } .has-sd-bgi { --_bgi: var(--sd-bgi); --_bgi-size: var(--sd-bgi-size, cover); --_bgi-pos: var(--sd-bgi-pos, 50% 50%); --_bgi-repeat: var(--sd-bgi-repeat, repeat); --_bgi-att: var(--sd-bgi-att, scroll); } .has-sd-bgi::before { content: ""; position: absolute; inset: 0; z-index: -1; margin: 0; pointer-events: none; border-radius: inherit; background-image: var(--_bgi); background-size: var(--_bgi-size); background-position: var(--_bgi-pos); background-repeat: var(--_bgi-repeat); background-attachment: var(--_bgi-att); opacity: var(--_bgio, 1); } /* ---- Map (0.40): height and gap per device; on phones the map and the details stack ---- * (.sd-map.sd-map: the block's own style.css loads after this file.) */ .sd-map { --_map-h-now: var(--sd-map-h, 420px); --_map-gap-now: var(--sd-map-gap, 0px); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .sd-map { --_map-h-now: var(--sd-map-h-tablet, var(--sd-map-h, 420px)); --_map-gap-now: var(--sd-map-gap-tablet, var(--sd-map-gap, 0px)); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-map { --_map-h-now: var(--sd-map-h-mobile, var(--sd-map-h-tablet, var(--sd-map-h, 320px))); --_map-gap-now: var(--sd-map-gap-mobile, var(--sd-map-gap-tablet, var(--sd-map-gap, 0px))); } :where(body:not(.sd-force-desktop)) .sd-map.sd-map:is(.is-layout-split, .is-layout-locations) { grid-template-columns: minmax(0, 1fr); } :where(body:not(.sd-force-desktop)) .sd-map.sd-map.sd-map:is(.is-layout-split, .is-layout-locations) > .sd-map__frame { order: -1; } :where(body:not(.sd-force-desktop)) .sd-map.sd-map.is-layout-locations > .sd-map__list { max-height: none; overflow: visible; } :where(body:not(.sd-force-desktop)) .sd-map.sd-map.is-layout-overlay > * { grid-area: auto; } :where(body:not(.sd-force-desktop)) .sd-map.sd-map.is-layout-overlay > .sd-map__info { width: auto; margin: 0; } :where(body:not(.sd-force-desktop)) .sd-map.sd-map.is-layout-overlay .sd-map__place { border-radius: 0; box-shadow: none; } } /* ---- 0.48: Profile in the Row layout stacks on phones (the block's own style.css loads after this * file, hence .sd-profile.sd-profile). */ @media (width < 640px) { :where(body:not(.sd-force-desktop)) .sd-profile.sd-profile.is-layout-row { flex-direction: column; } :where(body:not(.sd-force-desktop)) .sd-profile.sd-profile.is-layout-row .sd-profile__photo { width: 100%; } } /* ---- 0.48: Image Fit "Keep its shape" (logos): the Fixed height sets the height, the width follows * the image's own shape (never wider than its column), so a row of mixed logos lines up. Centred in * its column unless the image is aligned left or right. */ .wp-block-image.has-sd-imgh.is-sd-fit-natural img { display: block; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; } .wp-block-image.has-sd-imgh.is-sd-fit-natural.is-sd-align-start img { margin-inline: 0 auto; } .wp-block-image.has-sd-imgh.is-sd-fit-natural.is-sd-align-end img { margin-inline: auto 0; } /* ---- 0.46: Carousel slide height / shape, images filling their slide ---------------------------- * Slide height (an exact height per device) or Slide shape (an aspect ratio per device) make every * slide the same size. A slide that is an Image, or a Stack holding only an Image, fills it, cropped * (Fit: Cover) or whole (Contain). On the site each slide is wrapped in .sd-carousel__slide; in the * editor the blocks are the track's children. */ .sd-carousel.has-sd-sh .sd-carousel__track > * { height: var(--_sh-now); } .sd-carousel.has-sd-sar:not(.has-sd-sh) .sd-carousel__track > * { aspect-ratio: var(--_sar-now); } .sd-carousel:is(.has-sd-sh, .has-sd-sar) .sd-carousel__slide > :not(.sd-carousel__zoom) { height: 100%; box-sizing: border-box; margin-block: 0; } .sd-carousel:is(.has-sd-sh, .has-sd-sar) .sd-carousel__slide > .wp-block-image, .sd-carousel:is(.has-sd-sh, .has-sd-sar) :is(.sd-carousel__track, .sd-carousel__slide) > .sd-stack > .wp-block-image:only-child { height: 100%; width: 100%; margin: 0; flex: 1 1 auto; min-height: 0; } /* 0.48: in the editor the Image is the slide itself (a track child): it keeps the slide height or * shape above instead of 100% of the track (which is as tall as its content, so the photo stayed * at its own height). */ .sd-carousel:is(.has-sd-sh, .has-sd-sar) .sd-carousel__track > .wp-block-image { width: 100%; margin: 0; min-height: 0; } /* Height !important: the block editor puts style="height: auto" on the img. Fit is in :where() so * the image's own Fit (is-sd-fit-*) and Fixed height crop win over the carousel's Images setting. */ .sd-carousel:is(.has-sd-sh, .has-sd-sar) :is(.sd-carousel__track, .sd-carousel__slide) > .wp-block-image img, .sd-carousel:is(.has-sd-sh, .has-sd-sar) :is(.sd-carousel__track, .sd-carousel__slide) > .sd-stack > .wp-block-image:only-child img { display: block; width: 100%; height: 100% !important; max-width: none; } :where(.sd-carousel:is(.has-sd-sh, .has-sd-sar) :is(.sd-carousel__track, .sd-carousel__slide) > .wp-block-image) img, :where(.sd-carousel:is(.has-sd-sh, .has-sd-sar) :is(.sd-carousel__track, .sd-carousel__slide) > .sd-stack > .wp-block-image:only-child) img { object-fit: cover; } :where(.sd-carousel.is-fit-contain :is(.sd-carousel__track, .sd-carousel__slide) > .wp-block-image) img, :where(.sd-carousel.is-fit-contain :is(.sd-carousel__track, .sd-carousel__slide) > .sd-stack > .wp-block-image:only-child) img { object-fit: contain; } /* * 0.54: padding and margin from WordPress's Dimensions panel (desktop) plus tablet and phone * values (includes/spacing.php). One class per side and device that is set, so a device left * empty keeps what applies there (the block's default, or the larger screen's value). A value * you set wins over the block's own spacing and layout defaults (id strength + !important). */ @property --sd-xpt { syntax: '*'; inherits: false; } @property --sd-xpt-tablet { syntax: '*'; inherits: false; } @property --sd-xpt-mobile { syntax: '*'; inherits: false; } @property --sd-xpr { syntax: '*'; inherits: false; } @property --sd-xpr-tablet { syntax: '*'; inherits: false; } @property --sd-xpr-mobile { syntax: '*'; inherits: false; } @property --sd-xpb { syntax: '*'; inherits: false; } @property --sd-xpb-tablet { syntax: '*'; inherits: false; } @property --sd-xpb-mobile { syntax: '*'; inherits: false; } @property --sd-xpl { syntax: '*'; inherits: false; } @property --sd-xpl-tablet { syntax: '*'; inherits: false; } @property --sd-xpl-mobile { syntax: '*'; inherits: false; } @property --sd-xmt { syntax: '*'; inherits: false; } @property --sd-xmt-tablet { syntax: '*'; inherits: false; } @property --sd-xmt-mobile { syntax: '*'; inherits: false; } @property --sd-xmr { syntax: '*'; inherits: false; } @property --sd-xmr-tablet { syntax: '*'; inherits: false; } @property --sd-xmr-mobile { syntax: '*'; inherits: false; } @property --sd-xmb { syntax: '*'; inherits: false; } @property --sd-xmb-tablet { syntax: '*'; inherits: false; } @property --sd-xmb-mobile { syntax: '*'; inherits: false; } @property --sd-xml { syntax: '*'; inherits: false; } @property --sd-xml-tablet { syntax: '*'; inherits: false; } @property --sd-xml-mobile { syntax: '*'; inherits: false; } .has-sd-xpt:not(#_) { padding-top: var(--sd-xpt) !important; } .has-sd-xpr:not(#_) { padding-right: var(--sd-xpr) !important; } .has-sd-xpb:not(#_) { padding-bottom: var(--sd-xpb) !important; } .has-sd-xpl:not(#_) { padding-left: var(--sd-xpl) !important; } .has-sd-xmt:not(#_) { margin-top: var(--sd-xmt) !important; } .has-sd-xmr:not(#_) { margin-right: var(--sd-xmr) !important; } .has-sd-xmb:not(#_) { margin-bottom: var(--sd-xmb) !important; } .has-sd-xml:not(#_) { margin-left: var(--sd-xml) !important; } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-xpt-tablet:not(#_) { padding-top: var(--sd-xpt-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xpr-tablet:not(#_) { padding-right: var(--sd-xpr-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xpb-tablet:not(#_) { padding-bottom: var(--sd-xpb-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xpl-tablet:not(#_) { padding-left: var(--sd-xpl-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xmt-tablet:not(#_) { margin-top: var(--sd-xmt-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xmr-tablet:not(#_) { margin-right: var(--sd-xmr-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xmb-tablet:not(#_) { margin-bottom: var(--sd-xmb-tablet) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xml-tablet:not(#_) { margin-left: var(--sd-xml-tablet) !important; } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-xpt-mobile:not(#_) { padding-top: var(--sd-xpt-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xpr-mobile:not(#_) { padding-right: var(--sd-xpr-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xpb-mobile:not(#_) { padding-bottom: var(--sd-xpb-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xpl-mobile:not(#_) { padding-left: var(--sd-xpl-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xmt-mobile:not(#_) { margin-top: var(--sd-xmt-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xmr-mobile:not(#_) { margin-right: var(--sd-xmr-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xmb-mobile:not(#_) { margin-bottom: var(--sd-xmb-mobile) !important; } :where(body:not(.sd-force-desktop)) .has-sd-xml-mobile:not(#_) { margin-left: var(--sd-xml-mobile) !important; } } /* The margin in effect on this screen, per side (the side-margin hold rules read it). */ .has-sd-xmr { --_xmr-now: var(--sd-xmr); } .has-sd-xml { --_xml-now: var(--sd-xml); } @media (width < 1024px) { :where(body:not(.sd-force-desktop)) .has-sd-xmr-tablet { --_xmr-now: var(--sd-xmr-tablet); } :where(body:not(.sd-force-desktop)) .has-sd-xml-tablet { --_xml-now: var(--sd-xml-tablet); } } @media (width < 640px) { :where(body:not(.sd-force-desktop)) .has-sd-xmr-mobile { --_xmr-now: var(--sd-xmr-mobile); } :where(body:not(.sd-force-desktop)) .has-sd-xml-mobile { --_xml-now: var(--sd-xml-mobile); } }