/* TNM Mobile Footer — frontend styles */ /* Visual styling applies at all widths; the media queries at the very bottom of this file control WHERE the widget shows (mobile bottom bar vs. the optional right-edge rail on tablet/desktop). */ #tnmf-wrapper { display: none; } #tnmf-wrapper { display: block; position: fixed; z-index: 2147483647; /* sit above all page content: sticky bars, cookie notices, chat widgets, etc. */ font-family: inherit; --tnmf-off-x: 18px; --tnmf-off-y: 18px; } #tnmf-wrapper, #tnmf-wrapper * { box-sizing: border-box; } #tnmf-panel { position: absolute; right: 0; bottom: 100%; margin-bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } #tnmf-wrapper.tnmf-open #tnmf-panel { pointer-events: auto; } #tnmf-panel > * { transform: translateX(calc(100% + 30px)); opacity: 0; transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.22s ease; will-change: transform, opacity; } #tnmf-wrapper.tnmf-open #tnmf-panel > * { transform: translateX(0); opacity: 1; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; } #tnmf-panel > *:nth-child(1) { transition-delay: 0ms; } #tnmf-panel > *:nth-child(2) { transition-delay: 50ms; } #tnmf-panel > *:nth-child(3) { transition-delay: 100ms; } #tnmf-panel > *:nth-child(4) { transition-delay: 150ms; } #tnmf-panel > *:nth-child(5) { transition-delay: 200ms; } #tnmf-panel > *:nth-child(n+6) { transition-delay: 250ms; } #tnmf-wrapper.tnmf-open #tnmf-panel > *:nth-last-child(1) { transition-delay: 0ms; } #tnmf-wrapper.tnmf-open #tnmf-panel > *:nth-last-child(2) { transition-delay: 50ms; } #tnmf-wrapper.tnmf-open #tnmf-panel > *:nth-last-child(3) { transition-delay: 100ms; } #tnmf-wrapper.tnmf-open #tnmf-panel > *:nth-last-child(4) { transition-delay: 150ms; } #tnmf-wrapper.tnmf-open #tnmf-panel > *:nth-last-child(5) { transition-delay: 200ms; } #tnmf-wrapper.tnmf-open #tnmf-panel > *:nth-last-child(n+6) { transition-delay: 250ms; } /* * The toggle and WhatsApp buttons MUST be circles. Themes commonly set * generic `button` rules (border-radius, padding, border, min-width) * which can squash these into rounded squares, so the shape-defining * properties are marked !important. */ #tnmf-toggle { background: var(--tnmf-color, #d32f2f) !important; border: none !important; border-radius: 50% !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: none; transition: opacity 0.18s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; } #tnmf-toggle:active { transform: scale(0.96); } #tnmf-toggle svg { fill: #fff; display: block; } #tnmf-toggle .tnmf-icon-close { display: none; } /* When the panel is open, rotate the phone icon ~45° anticlockwise (the * chosen fill/outline icon stays the same — it just tilts), matching the * look of the original v1.14.3 open-state glyph. */ #tnmf-toggle .tnmf-icon-phone { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } #tnmf-wrapper.tnmf-open #tnmf-toggle .tnmf-icon-phone { transform: rotate(-45deg); } .tnmf-pill { display: inline-flex; align-items: center; background: var(--tnmf-color, #d32f2f) !important; color: #fff !important; text-decoration: none !important; border-radius: 999px !important; font-weight: 700; line-height: 1; box-shadow: 0 3px 10px rgba(0,0,0,0.18); -webkit-tap-highlight-color: transparent; } .tnmf-pill svg { fill: #fff; flex-shrink: 0; } .tnmf-whatsapp { background: #25D366 !important; border-radius: 50% !important; padding: 0 !important; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,0.18); text-decoration: none !important; display: inline-flex; align-items: center; } .tnmf-whatsapp svg { fill: #fff; } /* * Social buttons share the WhatsApp circle treatment. Shape-defining * properties are !important for the same theme-override reason as the * toggle/WhatsApp circles. Brand colours are fixed, so they live in the * stylesheet rather than coming through --tnmf-color. */ .tnmf-social { display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important; padding: 0 !important; border: none !important; text-decoration: none !important; box-shadow: 0 3px 10px rgba(0,0,0,0.18); -webkit-tap-highlight-color: transparent; } .tnmf-social svg { fill: #fff; display: block; } .tnmf-social-facebook { background: #1877F2 !important; } .tnmf-social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; } .tnmf-social-tiktok { background: #010101 !important; } .tnmf-social-x { background: #000000 !important; } .tnmf-social-youtube { background: #ff0000 !important; } .tnmf-social-linkedin { background: #0a66c2 !important; } /* ---------- Size variants ---------- */ /* Main toggle */ #tnmf-wrapper.tnmf-toggle-small #tnmf-toggle { width: 48px !important; height: 48px !important; } #tnmf-wrapper.tnmf-toggle-medium #tnmf-toggle { width: 58px !important; height: 58px !important; } #tnmf-wrapper.tnmf-toggle-large #tnmf-toggle { width: 70px !important; height: 70px !important; } #tnmf-wrapper.tnmf-toggle-small #tnmf-toggle svg { width: 22px; height: 22px; } #tnmf-wrapper.tnmf-toggle-medium #tnmf-toggle svg { width: 26px; height: 26px; } #tnmf-wrapper.tnmf-toggle-large #tnmf-toggle svg { width: 32px; height: 32px; } /* Number pills */ #tnmf-wrapper.tnmf-items-small .tnmf-pill { padding: 9px 16px; font-size: 14px; gap: 7px; } #tnmf-wrapper.tnmf-items-medium .tnmf-pill { padding: 12px 20px; font-size: 16px; gap: 8px; } #tnmf-wrapper.tnmf-items-large .tnmf-pill { padding: 14px 26px; font-size: 18px; gap: 10px; } #tnmf-wrapper.tnmf-items-small .tnmf-pill svg { width: 16px; height: 16px; } #tnmf-wrapper.tnmf-items-medium .tnmf-pill svg { width: 18px; height: 18px; } #tnmf-wrapper.tnmf-items-large .tnmf-pill svg { width: 20px; height: 20px; } /* WhatsApp circle */ #tnmf-wrapper.tnmf-items-small .tnmf-whatsapp { width: 42px !important; height: 42px !important; } #tnmf-wrapper.tnmf-items-medium .tnmf-whatsapp { width: 50px !important; height: 50px !important; } #tnmf-wrapper.tnmf-items-large .tnmf-whatsapp { width: 60px !important; height: 60px !important; } #tnmf-wrapper.tnmf-items-small .tnmf-whatsapp svg { width: 22px; height: 22px; } #tnmf-wrapper.tnmf-items-medium .tnmf-whatsapp svg { width: 26px; height: 26px; } #tnmf-wrapper.tnmf-items-large .tnmf-whatsapp svg { width: 32px; height: 32px; } /* Social circles (same footprint as the WhatsApp circle) */ #tnmf-wrapper.tnmf-items-small .tnmf-social { width: 42px !important; height: 42px !important; } #tnmf-wrapper.tnmf-items-medium .tnmf-social { width: 50px !important; height: 50px !important; } #tnmf-wrapper.tnmf-items-large .tnmf-social { width: 60px !important; height: 60px !important; } #tnmf-wrapper.tnmf-items-small .tnmf-social svg { width: 20px !important; height: 20px !important; } #tnmf-wrapper.tnmf-items-medium .tnmf-social svg { width: 24px !important; height: 24px !important; } #tnmf-wrapper.tnmf-items-large .tnmf-social svg { width: 30px !important; height: 30px !important; } /* ---------------------------------------------------------------------- * Social placement: "bar" — socials sit in a permanent horizontal row to * the LEFT of the toggle (always visible, no open/close animation). The * wrapper becomes a flex row; the panel stays absolutely positioned above * the toggle, so WhatsApp / phone numbers still pop up from the button. * (Kept inside the media query so the footer stays hidden on desktop.) * ------------------------------------------------------------------- */ #tnmf-wrapper.tnmf-socialpos-bar { display: flex; align-items: center; gap: 10px; } #tnmf-social-bar { display: flex; align-items: center; gap: 10px; } /* ---------------------------------------------------------------------- * Icon background pill (placement = bar + "Icon Background" not "None"). * The wrapper already contains the social bar and the toggle as a flex * row, so styling the wrapper puts one rounded pill behind the whole * social + phone cluster. * ------------------------------------------------------------------- */ /* Frosted glass (light) — translucent + blur. -webkit- prefix is required * on iOS Safari; the rgba background is the no-blur fallback. */ #tnmf-wrapper.tnmf-socialpos-bar.tnmf-bg-glass { padding: 7px 9px; background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20); } /* Dark pill — solid opaque raised charcoal bar with a light bevelled rim. */ #tnmf-wrapper.tnmf-socialpos-bar.tnmf-bg-dark { padding: 9px 11px; background: #2c2c2f; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 4px rgba(0, 0, 0, 0.3); } /* Icons sit flat on the pill — no drop shadow behind them. */ #tnmf-wrapper.tnmf-bg-glass #tnmf-toggle, #tnmf-wrapper.tnmf-bg-glass .tnmf-social, #tnmf-wrapper.tnmf-bg-dark #tnmf-toggle, #tnmf-wrapper.tnmf-bg-dark .tnmf-social { box-shadow: none; } /* ---------------------------------------------------------------------- * Style 2 — floating "Socials" text button. * * The toggle (#tnmf-toggle) becomes a labelled pill instead of a circle; * the social icons live in the panel and slide in on tap (no permanent * bar). The button looks reuse the glass / dark treatments plus a * custom-colour option driven by --tnmf-s2-bg / --tnmf-s2-fg, which are * set inline on the wrapper (same optimiser-proof pattern as --tnmf-color). * Selectors carry an extra class over the base #tnmf-toggle rule, so they * out-specify it; !important on the shape/background/colour keeps theme * `button { … }` rules from clobbering the pill. * ------------------------------------------------------------------- */ #tnmf-wrapper.tnmf-style-2 #tnmf-toggle { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; border-radius: 999px !important; white-space: nowrap; font-weight: 700; line-height: 1; } #tnmf-wrapper.tnmf-style-2 #tnmf-toggle .tnmf-s2-label { display: block; } /* Label size + padding track the Main Button Size setting. */ #tnmf-wrapper.tnmf-style-2.tnmf-toggle-small #tnmf-toggle { padding: 11px 20px !important; font-size: 15px; } #tnmf-wrapper.tnmf-style-2.tnmf-toggle-medium #tnmf-toggle { padding: 14px 24px !important; font-size: 17px; } #tnmf-wrapper.tnmf-style-2.tnmf-toggle-large #tnmf-toggle { padding: 16px 30px !important; font-size: 19px; } /* Frosted glass (light) — translucent blur with dark text for contrast. * -webkit- prefix required on iOS Safari; rgba is the no-blur fallback. */ #tnmf-wrapper.tnmf-style-2.tnmf-s2-glass #tnmf-toggle { background: rgba(255, 255, 255, 0.18) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.35) !important; color: #1a1a1a !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20); } /* Dark pill — solid opaque charcoal with a light bevelled rim, white text. */ #tnmf-wrapper.tnmf-style-2.tnmf-s2-dark #tnmf-toggle { background: #2c2c2f !important; border: 1.5px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 4px rgba(0, 0, 0, 0.3); } /* Custom colour — background + text colour chosen in the admin. */ #tnmf-wrapper.tnmf-style-2.tnmf-s2-custom #tnmf-toggle { background: var(--tnmf-s2-bg, #d32f2f) !important; border: none !important; color: var(--tnmf-s2-fg, #ffffff) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } /* ---------------------------------------------------------------------- * Style 3 — permanent horizontal "contact bar". * * The wrapper is a flex row of independent buttons. Each button is its own * styled pill (icon-only for phone/email, text for socials/reviews) and * reuses the Style 2 appearance modifier on the wrapper (tnmf-s2-glass / * -dark / -custom). Reveal buttons (phone, socials) carry a popover that * pops up directly above that button; email/reviews are plain links. * ------------------------------------------------------------------- */ #tnmf-wrapper.tnmf-style-3 { display: flex; align-items: center; gap: 10px; } /* Corner cluster (not the full-width Style 4 header bar): keep the row of * buttons on-screen. It hugs the bottom-right corner and, if there are more * buttons than fit on one line, wraps upward while staying right-aligned * rather than running off the left edge of the viewport. */ .tnmf-s3-item { position: relative; display: inline-flex; } /* Shared pill look for every Style 3 button. !important on the shape and * fill keeps theme `button`/`a` rules from reshaping or recolouring them. */ .tnmf-s3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px !important; border: none !important; min-width: 0 !important; min-height: 0 !important; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none !important; transition: transform 0.18s ease; -webkit-tap-highlight-color: transparent; } .tnmf-s3-btn:active { transform: scale(0.96); } .tnmf-s3-btn svg { display: block; fill: currentColor; } /* Size + padding track the Main Button Size setting. */ #tnmf-wrapper.tnmf-style-3.tnmf-toggle-small .tnmf-s3-btn { padding: 10px 16px !important; font-size: 14px; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-medium .tnmf-s3-btn { padding: 13px 20px !important; font-size: 16px; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-large .tnmf-s3-btn { padding: 15px 26px !important; font-size: 18px; } /* Icon-only buttons (phone, email) get even padding so they read as round-ish. */ #tnmf-wrapper.tnmf-style-3.tnmf-toggle-small .tnmf-s3-icononly { padding: 11px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-medium .tnmf-s3-icononly { padding: 14px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-large .tnmf-s3-icononly { padding: 16px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-small .tnmf-s3-btn svg { width: 20px !important; height: 20px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-medium .tnmf-s3-btn svg { width: 22px !important; height: 22px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-large .tnmf-s3-btn svg { width: 26px !important; height: 26px !important; } /* The "5 stars" reviews icon sits small inside its own artwork, so it gets a larger box than the standard icons; its button padding is trimmed by the same amount so the button footprint stays identical to the others. */ #tnmf-wrapper.tnmf-style-3.tnmf-toggle-small .tnmf-s3-btn svg.tnmf-ico-5star { width: 23px !important; height: 23px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-medium .tnmf-s3-btn svg.tnmf-ico-5star { width: 25px !important; height: 25px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-large .tnmf-s3-btn svg.tnmf-ico-5star { width: 29px !important; height: 29px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-small .tnmf-s3-five.tnmf-s3-icononly { padding: 9.5px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-medium .tnmf-s3-five.tnmf-s3-icononly { padding: 12.5px !important; } #tnmf-wrapper.tnmf-style-3.tnmf-toggle-large .tnmf-s3-five.tnmf-s3-icononly { padding: 14.5px !important; } /* Appearance — same recipes as Style 2, applied per button. */ #tnmf-wrapper.tnmf-style-3.tnmf-s2-glass .tnmf-s3-btn { background: rgba(255, 255, 255, 0.18) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.35) !important; color: #1a1a1a !important; box-shadow: none; } #tnmf-wrapper.tnmf-style-3.tnmf-s2-dark .tnmf-s3-btn { background: #2c2c2f !important; border: 1.5px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 4px rgba(0, 0, 0, 0.3); } #tnmf-wrapper.tnmf-style-3.tnmf-s2-custom .tnmf-s3-btn { background: var(--tnmf-s2-bg, #d32f2f) !important; border: none !important; color: var(--tnmf-s2-fg, #ffffff) !important; box-shadow: none; } /* Popover above a reveal button, anchored to that button. The items * animate in exactly like the Style 1/2 panel: each slides in from the * right, staggered one-by-one (bottom item — nearest the button — first * on open; top item first on close). Same easings and 50ms steps. */ .tnmf-popover { position: absolute; bottom: 100%; right: 0; margin-bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .tnmf-s3-item.tnmf-open .tnmf-popover { pointer-events: auto; } .tnmf-popover > * { flex-shrink: 0; transform: translateX(calc(100% + 30px)); opacity: 0; transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.22s ease; will-change: transform, opacity; } .tnmf-s3-item.tnmf-open .tnmf-popover > * { transform: translateX(0); opacity: 1; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; } /* Close: top item leaves first, cascading down. */ .tnmf-popover > *:nth-child(1) { transition-delay: 0ms; } .tnmf-popover > *:nth-child(2) { transition-delay: 50ms; } .tnmf-popover > *:nth-child(3) { transition-delay: 100ms; } .tnmf-popover > *:nth-child(4) { transition-delay: 150ms; } .tnmf-popover > *:nth-child(5) { transition-delay: 200ms; } .tnmf-popover > *:nth-child(n+6) { transition-delay: 250ms; } /* Open: bottom item (nearest the button) arrives first, cascading up. */ .tnmf-s3-item.tnmf-open .tnmf-popover > *:nth-last-child(1) { transition-delay: 0ms; } .tnmf-s3-item.tnmf-open .tnmf-popover > *:nth-last-child(2) { transition-delay: 50ms; } .tnmf-s3-item.tnmf-open .tnmf-popover > *:nth-last-child(3) { transition-delay: 100ms; } .tnmf-s3-item.tnmf-open .tnmf-popover > *:nth-last-child(4) { transition-delay: 150ms; } .tnmf-s3-item.tnmf-open .tnmf-popover > *:nth-last-child(5) { transition-delay: 200ms; } .tnmf-s3-item.tnmf-open .tnmf-popover > *:nth-last-child(n+6) { transition-delay: 250ms; } /* --------------------------------------------------------------------- * Button shape. "circle" is the default look from the base rules above; * "rounded" and "square" override the border-radius on every button * background across Styles 1, 2 and 3. * ------------------------------------------------------------------- */ #tnmf-wrapper.tnmf-shape-rounded #tnmf-toggle, #tnmf-wrapper.tnmf-shape-rounded .tnmf-pill, #tnmf-wrapper.tnmf-shape-rounded .tnmf-whatsapp, #tnmf-wrapper.tnmf-shape-rounded .tnmf-social, #tnmf-wrapper.tnmf-shape-rounded .tnmf-s3-btn, #tnmf-wrapper.tnmf-shape-rounded.tnmf-socialpos-bar.tnmf-bg-glass, #tnmf-wrapper.tnmf-shape-rounded.tnmf-socialpos-bar.tnmf-bg-dark { border-radius: 20px !important; } #tnmf-wrapper.tnmf-shape-square #tnmf-toggle, #tnmf-wrapper.tnmf-shape-square .tnmf-pill, #tnmf-wrapper.tnmf-shape-square .tnmf-whatsapp, #tnmf-wrapper.tnmf-shape-square .tnmf-social, #tnmf-wrapper.tnmf-shape-square .tnmf-s3-btn, #tnmf-wrapper.tnmf-shape-square.tnmf-socialpos-bar.tnmf-bg-glass, #tnmf-wrapper.tnmf-shape-square.tnmf-socialpos-bar.tnmf-bg-dark { border-radius: 0 !important; } /* "Joined": fully square (0px) buttons. On Style 3 the gap is removed so the * buttons abut into one connected, right-aligned bar; the Email and Reviews * buttons get a light shadow so adjacent tiles stay distinguishable. Styles * 1 & 2 show a single button at rest, so this just renders them square. */ #tnmf-wrapper.tnmf-shape-joined #tnmf-toggle, #tnmf-wrapper.tnmf-shape-joined .tnmf-pill, #tnmf-wrapper.tnmf-shape-joined .tnmf-whatsapp, #tnmf-wrapper.tnmf-shape-joined .tnmf-social, #tnmf-wrapper.tnmf-shape-joined .tnmf-s3-btn, #tnmf-wrapper.tnmf-shape-joined.tnmf-socialpos-bar.tnmf-bg-glass, #tnmf-wrapper.tnmf-shape-joined.tnmf-socialpos-bar.tnmf-bg-dark { border-radius: 0 !important; } /* Some themes (e.g. Salient) style