/** * FACIL'iti mobile UX styles. * * Two concerns: * 1. The auto-hide transition applied to the * Web Component host when `body.lftt-faciliti-cta-collapsed` is on. * 2. Visual styling for the trigger pill + visibility toggle rendered * inside the mobile hamburger menu. * * Variables (--color-primary, --color-text, --color-muted) come from * the LFTT theme's base.css. We reference them but provide sensible * fallbacks so the plugin still renders if used against a different * theme. */ /* ─── Auto-hide transition ──────────────────────────────────────── */ f7i-essentiel-cta { transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); } body.lftt-faciliti-cta-collapsed f7i-essentiel-cta { opacity: 0; transform: translateY(20px); pointer-events: none; } /* Pre-paint marker set on by the inline head script. Prevents the pastille from flashing in before our JS module promotes it to the body class. */ html.lftt-faciliti-cta-collapsed-pre f7i-essentiel-cta { opacity: 0; transform: translateY(20px); pointer-events: none; transition: none; } /* ─── Menu controls (mobile only) ───────────────────────────────── */ .lftt-faciliti-menu-controls { list-style: none; margin: 2.5rem 0 0; padding: 0; display: none; flex-direction: column; align-items: stretch; gap: 1rem; width: min(380px, 100%); } @media (max-width: 960px) { .lftt-faciliti-menu-controls { display: flex; } } /* Toggle row */ .lftt-faciliti-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem 0.75rem 1.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text, #f6f7ff); } .lftt-faciliti-toggle__label { font-size: 0.9rem; color: var(--color-muted, #c8cde8); line-height: 1.2; } .lftt-faciliti-toggle__btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0; background: transparent; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; } .lftt-faciliti-toggle__btn:focus-visible { outline: 2px solid var(--color-primary, #f34774); outline-offset: 3px; border-radius: 999px; } .lftt-faciliti-toggle__track { position: relative; display: inline-block; width: 44px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background 0.2s ease; flex-shrink: 0; } .lftt-faciliti-toggle__dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s ease; } .lftt-faciliti-toggle__state-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text, #f6f7ff); min-width: 5.5em; text-align: left; } /* State variants — driven by data-state on the toggle root. */ .lftt-faciliti-toggle[data-state="auto"] .lftt-faciliti-toggle__track { background: rgba(255, 255, 255, 0.18); } .lftt-faciliti-toggle[data-state="auto"] .lftt-faciliti-toggle__dot { left: calc(50% - 9px); background: var(--color-muted, #c8cde8); } .lftt-faciliti-toggle[data-state="forced-on"] .lftt-faciliti-toggle__track { background: var(--color-primary, #f34774); } .lftt-faciliti-toggle[data-state="forced-on"] .lftt-faciliti-toggle__dot { left: 23px; background: #fff; } .lftt-faciliti-toggle[data-state="forced-off"] .lftt-faciliti-toggle__track { background: rgba(255, 255, 255, 0.08); } .lftt-faciliti-toggle[data-state="forced-off"] .lftt-faciliti-toggle__dot { left: 3px; background: rgba(255, 255, 255, 0.45); } /* ─── Desktop on/off pill (rendered under footer Quick Links) ────── */ .lftt-faciliti-desktop-toggle { display: none; margin-top: 0.9rem; align-items: center; gap: 0.6rem; color: var(--color-muted, #c8cde8); font-size: 0.85rem; } @media (min-width: 961px) { .lftt-faciliti-desktop-toggle { display: inline-flex; } } .lftt-faciliti-desktop-toggle__label { color: var(--color-muted, #c8cde8); line-height: 1.2; } .lftt-faciliti-desktop-toggle__btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0; background: transparent; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; } .lftt-faciliti-desktop-toggle__btn:focus-visible { outline: 2px solid var(--color-primary, #f34774); outline-offset: 3px; border-radius: 999px; } .lftt-faciliti-desktop-toggle__track { position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background 0.2s ease; flex-shrink: 0; } .lftt-faciliti-desktop-toggle__dot { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: left 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s ease; } .lftt-faciliti-desktop-toggle__state-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text, #f6f7ff); min-width: 1.8em; text-align: left; } .lftt-faciliti-desktop-toggle[data-state="on"] .lftt-faciliti-desktop-toggle__track { background: var(--color-primary, #f34774); } .lftt-faciliti-desktop-toggle[data-state="on"] .lftt-faciliti-desktop-toggle__dot { left: 19px; background: #fff; } .lftt-faciliti-desktop-toggle[data-state="off"] .lftt-faciliti-desktop-toggle__track { background: rgba(255, 255, 255, 0.08); } .lftt-faciliti-desktop-toggle[data-state="off"] .lftt-faciliti-desktop-toggle__dot { left: 3px; background: rgba(255, 255, 255, 0.4); } /* ─── Reduced motion ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { f7i-essentiel-cta, .lftt-faciliti-toggle__track, .lftt-faciliti-toggle__dot, .lftt-faciliti-desktop-toggle__track, .lftt-faciliti-desktop-toggle__dot { transition: none !important; } }