/** * Theme Builder fallback notice — page-level chrome for `index.php`. * * Enqueued by `tewido_elementra_theme_enqueue_notice_styles()` from * `index.php` just before `get_header()`, so it never ships on * Theme-Builder-driven pages or pages that use Elementor / custom * templates that bypass `index.php`. * * What it owns: * 1. Sticky-footer flexbox on `` + soft page backdrop. * 2. The notice card — brand-gradient icon, kicker pill, large * title, lead copy, primary CTA with arrow, secondary * back-to-home link. * * The fallback header/footer BAR rules live separately in * `tb-fallback-bar.css` so the bar render helper can print them * inline from any page template — not just `index.php`. * * Brand colour tokens (`--tewido-elementra-color-*`) are emitted by * the plugin's Colors tab on `:root`, so they resolve here without any * theme-side configuration. */ /* =================================================================== * Sticky-footer flexbox + page backdrop * ================================================================= */ html, body { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: radial-gradient(ellipse 60% 50% at 50% 35%, color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 6%, transparent) 0%, transparent 70%), #fafafa; background-attachment: fixed; } .screen-reader-text { position: absolute; top: -10000em; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .tewido-elementra-tb-fallback-bar { flex: 0 0 auto; } .tewido-elementra-theme-main--notice { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 64px 24px; box-sizing: border-box; } /* Fallback bar rules live in `assets/css/tb-fallback-bar.css` so they * can be printed inline by the bar render helper from anywhere — not * just the notice-template path. See `tewido_elementra_theme_render_fallback_bar()`. */ /* =================================================================== * Notice card * Brand kicker, big heading, lead copy, primary CTA with arrow, * secondary back-to-home link. A radial halo behind the card adds * depth without an obvious "card on card" feel. * ================================================================= */ .tewido-elementra-tb-notice { position: relative; width: 100%; max-width: 560px; margin: 0 auto; text-align: center; color: var(--tewido-elementra-color-body, #474747); font-family: var(--tewido-elementra-font-body, inherit); } /* Brand-gradient circle with a Lucide-style info glyph (CSS-only — * no SVG file, no extra markup). Slightly larger than before; sits * above the kicker badge as the primary visual anchor. */ .tewido-elementra-tb-notice::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg, var(--tewido-elementra-color-primary, #93003f) 0%, var(--tewido-elementra-color-secondary, #c2185b) 100%); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-size: 36px 36px; -webkit-mask-size: 36px 36px; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; box-shadow: 0 8px 24px color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 30%, transparent); } /* Small brand-tinted pill above the title. Reads as a category / * source tag — admins know at a glance this is plugin-emitted. */ .tewido-elementra-tb-notice__kicker { display: inline-block; padding: 5px 12px; margin: 0 0 16px; background: color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 10%, transparent); color: var(--tewido-elementra-color-primary, #93003f); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; } .tewido-elementra-tb-notice__title { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--tewido-elementra-color-heading, #292929); font-family: var(--tewido-elementra-font-heading, inherit); } .tewido-elementra-tb-notice__lead { margin: 0 0 28px; font-size: 15px; line-height: 1.65; color: var(--tewido-elementra-color-body, #474747); } /* Actions row — primary CTA + secondary link, stacked on narrow * viewports, side-by-side from ~480px up. */ .tewido-elementra-tb-notice__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; } .tewido-elementra-tb-notice__primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--tewido-elementra-color-primary, #93003f); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 10px; transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 4px 12px color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 25%, transparent); } .tewido-elementra-tb-notice__primary:hover, .tewido-elementra-tb-notice__primary:focus { background: color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 85%, black); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 35%, transparent); outline: none; } .tewido-elementra-tb-notice__primary:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tewido-elementra-color-primary, #93003f) 30%, transparent); } .tewido-elementra-tb-notice__arrow { width: 16px; height: 16px; transition: transform 0.18s ease; } .tewido-elementra-tb-notice__primary:hover .tewido-elementra-tb-notice__arrow, .tewido-elementra-tb-notice__primary:focus .tewido-elementra-tb-notice__arrow { transform: translateX(3px); } [dir="rtl"] .tewido-elementra-tb-notice__arrow { transform: scaleX(-1); } [dir="rtl"] .tewido-elementra-tb-notice__primary:hover .tewido-elementra-tb-notice__arrow, [dir="rtl"] .tewido-elementra-tb-notice__primary:focus .tewido-elementra-tb-notice__arrow { transform: scaleX(-1) translateX(3px); } .tewido-elementra-tb-notice__secondary { color: var(--tewido-elementra-color-body, #474747); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 4px; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .tewido-elementra-tb-notice__secondary:hover, .tewido-elementra-tb-notice__secondary:focus { color: var(--tewido-elementra-color-primary, #93003f); border-bottom-color: currentColor; outline: none; } @media (max-width: 600px) { .tewido-elementra-theme-main--notice { padding: 32px 16px; } .tewido-elementra-tb-notice { padding: 40px 24px; border-radius: 16px; } .tewido-elementra-tb-notice::before { width: 56px; height: 56px; margin-bottom: 18px; } .tewido-elementra-tb-notice__title { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .tewido-elementra-tb-notice__primary, .tewido-elementra-tb-notice__arrow, .tewido-elementra-tb-notice__secondary { transition: none; } }