/** * Theme-Builder fallback bar — minimal standalone chrome rule set. * * Printed inline by `tewido_elementra_theme_render_fallback_bar()` at * the moment the bar renders, so it ships ONLY on pages that actually * emit the bar (theme path: any view where no Theme Builder Header / * Footer applies). The plugin's canvas path ships an identical rule * set inside `theme-builder-frontend.css`, which is always loaded on * canvas, so the two paths produce a visually identical bar. * * Brand tokens (`--tewido-elementra-color-*`) are emitted by the * plugin's Colors tab on `:root`, so they resolve here without any * theme-side configuration. */ .tewido-elementra-tb-fallback-bar { background: #ffffff; padding: 12px 24px; font-family: var(--tewido-elementra-font-body, inherit); font-size: 13px; line-height: 1.4; color: var(--tewido-elementra-color-body, #474747); position: relative; z-index: 1; } .tewido-elementra-tb-fallback-bar--header { border-bottom: 1px solid color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 14%, #ececec); box-shadow: 0 1px 0 color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 4%, transparent); } .tewido-elementra-tb-fallback-bar--footer { border-top: 1px solid color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 14%, #ececec); box-shadow: 0 -1px 0 color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 4%, transparent); } /** * Sticky-footer behavior. When the fallback footer bar is present we * make `` a flex column tall enough to fill the viewport, and * push the bar to the bottom with `margin-top: auto`. `:has()` scopes * the layout change to pages that actually render the bar — views * with a Theme Builder Footer keep their natural body layout. * * `100dvh` follows mobile browser chrome (URL-bar collapse); the * preceding `100vh` declaration is the fallback for older engines * that ignore the `dvh` unit. The `admin-bar` overrides subtract the * fixed WP admin bar (32px desktop, 46px mobile ≤782px) so the bar * lands flush with the visible viewport bottom rather than 32–46px * below it. */ body:has(> .tewido-elementra-tb-fallback-bar--footer) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body:has(> .tewido-elementra-tb-fallback-bar--footer) > .tewido-elementra-tb-fallback-bar--footer { margin-top: auto; } body.admin-bar:has(> .tewido-elementra-tb-fallback-bar--footer) { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); } @media screen and (max-width: 782px) { body.admin-bar:has(> .tewido-elementra-tb-fallback-bar--footer) { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); } } .tewido-elementra-tb-fallback-bar__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; } .tewido-elementra-tb-fallback-bar__icon { width: 18px; height: 18px; color: var(--tewido-elementra-color-primary, #93003f); flex-shrink: 0; } .tewido-elementra-tb-fallback-bar__text { flex: 1 1 auto; min-width: 0; } .tewido-elementra-tb-fallback-bar__link { display: inline-flex; align-items: center; gap: 6px; color: var(--tewido-elementra-color-primary, #93003f); text-decoration: none; font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 8%, transparent); transition: background-color 0.15s ease, color 0.15s ease; flex-shrink: 0; } .tewido-elementra-tb-fallback-bar__link:hover, .tewido-elementra-tb-fallback-bar__link:focus { background: color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 18%, transparent); outline: none; } .tewido-elementra-tb-fallback-bar__link:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 30%, transparent); } @media (max-width: 640px) { .tewido-elementra-tb-fallback-bar { padding: 10px 16px; font-size: 12px; } .tewido-elementra-tb-fallback-bar__inner { gap: 8px 10px; } }