/* * Fallreep CMP stylesheet. * Dynamic colors (for example --fr-bg, --fr-accent) are injected by PHP into * from settings in fallreep.json. */ /* ================================================================================================ * START SECTION: CONTAINERS AND OVERLAYS * ============================================================================================== */ /* Dark semi-transparent backdrop covering the page */ #fr-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--fr-overlay, rgba(0, 0, 0, 0.6)); z-index: 999998; /* Keep above theme elements */ display: none; opacity: 0; transition: opacity 0.3s ease; } /* Visibility toggle */ #fr-overlay.fr-show { display: block; opacity: 1; } /* Base styles for banner and modal. Font comes from JSON (--fr-font-family) or inherits from page. */ .fr-box { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); /* Center horizontally, slightly pushed down for animation */ width: 90%; max-width: 500px; background: var(--fr-bg); box-shadow: var(--fr-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1)); z-index: 999999; /* Higher than overlay */ padding: 30px; font-family: var(--fr-font-family, inherit); color: var(--fr-text); display: none; opacity: 0; transition: all 0.3s ease; box-sizing: border-box; max-height: 90vh; overflow-y: auto; /* Allow scrolling when content is taller than viewport */ } /* Visibility toggle + slide-up animation */ .fr-box.fr-show { display: block; opacity: 1; transform: translateX(-50%) translateY(-30%); } /* Smaller vertical lift when legal details are expanded */ .fr-box.fr-show.fr-legal-expanded { transform: translateX(-50%) translateY(-3%); } /* Detailed modal overrides */ #fr-modal { max-width: 800px; top: 50%; bottom: auto; /* Center vertically instead of anchoring to bottom */ transform: translate(-50%, -50%) scale(0.95); /* Slight scale for pop-in animation */ } #fr-modal.fr-show { transform: translate(-50%, -50%) scale(1); } /* ================================================================================================ * END SECTION: CONTAINERS AND OVERLAYS * ============================================================================================== */ /* ================================================================================================ * START SECTION: BRANDING AND TYPOGRAPHY * ============================================================================================== */ .fr-header { display: flex; justify-content: flex-start; margin-bottom: 20px; } .fr-logo { max-height: 45px; width: auto; } .fr-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 15px 0; text-align: center; color: var(--fr-text, #000); } .fr-text { font-size: 0.9rem; line-height: 1.5; margin: 0 0 20px 0; text-align: left; color: var(--fr-text-muted, #475569); } /* ================================================================================================ * END SECTION: BRANDING AND TYPOGRAPHY * ============================================================================================== */ /* ================================================================================================ * START SECTION: BUTTONS AND LAYOUTS * ============================================================================================== */ /* Shared button base (fallback for buttons without dedicated class) */ .fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--fr-btn-bg); color: var(--fr-btn-text); border: 1px solid var(--fr-border); padding: 12px 15px; /*border-radius: var(--fr-radius); font-size: 0.9rem; font-weight: 600;*/ cursor: pointer; transition: background 0.2s; text-align: center; box-sizing: border-box; } .fr-btn:hover, .fr-btn:focus-visible { background: var(--fr-btn-hover); } /* Per-button colors from JSON; PHP injects --fr-btn-{name}-bg/text/hover */ .fr-btn-essential { background: var(--fr-btn-essential-bg); color: var(--fr-btn-essential-text); } .fr-btn-essential:hover, .fr-btn-essential:focus-visible { background: var(--fr-btn-essential-hover); } .fr-btn-functional { background: var(--fr-btn-functional-bg); color: var(--fr-btn-functional-text); } .fr-btn-functional:hover, .fr-btn-functional:focus-visible { background: var(--fr-btn-functional-hover); } .fr-btn-accept-all { background: var(--fr-btn-accept-all-bg); color: var(--fr-btn-accept-all-text); } .fr-btn-accept-all:hover, .fr-btn-accept-all:focus-visible { background: var(--fr-btn-accept-all-hover); } .fr-btn-custom { background: var(--fr-btn-custom-bg); color: var(--fr-btn-custom-text); } .fr-btn-custom:hover, .fr-btn-custom:focus-visible { background: var(--fr-btn-custom-hover); color: var(--fr-btn-text); } .fr-btn-save { background: var(--fr-btn-save-bg); color: var(--fr-btn-save-text); } .fr-btn-save:hover, .fr-btn-save:focus-visible { background: var(--fr-btn-save-hover); color: var(--fr-btn-text); } .fr-btn-back { background: var(--fr-btn-back-bg); color: var(--fr-btn-back-text); } .fr-btn-back:hover, .fr-btn-back:focus-visible { background: var(--fr-btn-back-hover); } .fr-btn-legal-toggle { color: var(--fr-btn-legal-toggle-text, var(--fr-accent)); } .fr-btn-legal-toggle:hover, .fr-btn-legal-toggle:focus-visible { color: var(--fr-btn-legal-toggle-hover, var(--fr-accent)); background: transparent; } #fr-trigger.fr-btn-trigger { background: transparent; color: var(--fr-btn-trigger-text); border-color: #ffffff; } #fr-trigger.fr-btn-trigger:hover, #fr-trigger.fr-btn-trigger:focus-visible { border-color: #ffffff; background: #ffffff; } /* Remove default focus ring; keyboard focus uses :focus-visible styles below */ #fr-banner .fr-btn:focus, #fr-modal .fr-btn:focus, #fr-banner button:focus, #fr-modal button:focus, #fr-trigger:focus { outline: none; } #fr-banner .fr-btn:focus-visible, #fr-modal .fr-btn:focus-visible, #fr-banner button:focus-visible, #fr-modal button:focus-visible { outline: 1px solid #000000; outline-offset: 2px; } /* Button icons use local SVG; currentColor inherits button text color */ .fr-btn-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .fr-btn-icon svg { width: 1.1em; height: 1.1em; } .fr-legal-dropdown .fr-btn-icon svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; vertical-align: middle; position: relative; top: -0.05em; } /* SVG chevron for accordion/cookie/legal toggles; rotation indicates open state */ .fr-chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .fr-chevron svg { width: 1em; height: 1em; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .fr-chevron--open svg { transform: rotate(270deg); } /* * Theme isolation: * Many themes style button:hover/focus globally and override simple .fr-* selectors. * Scope rules with #fr-banner/#fr-modal so Fallreep styles win without !important. */ #fr-banner button.fr-accordion-toggle:hover, #fr-modal button.fr-accordion-toggle:hover, #fr-banner button.fr-accordion-toggle:focus, #fr-modal button.fr-accordion-toggle:focus { background: transparent; background-color: transparent; color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } #fr-banner button.fr-cookie-toggle:hover, #fr-modal button.fr-cookie-toggle:hover, #fr-banner button.fr-cookie-toggle:focus, #fr-modal button.fr-cookie-toggle:focus { background: transparent; background-color: transparent; color: var(--fr-accent); } #fr-banner button.fr-legal-toggle:hover, #fr-banner button.fr-legal-toggle:focus, #fr-modal button.fr-legal-toggle:focus { background: transparent; background-color: transparent; color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } #fr-banner button.fr-legal-toggle:focus:not(:hover), #fr-modal button.fr-legal-toggle:focus:not(:hover) { color: var(--fr-btn-legal-toggle-text, var(--fr-accent)); text-decoration: none; } #fr-modal button.fr-legal-toggle:hover { color: var(--elarb-blue, var(--fr-accent)); background-color: transparent; } /* Adaptive action layouts: - full-column: all visible buttons are 100% width - two-column: equal 50/50 columns without placeholder gaps */ #fr-banner .fr-actions, #fr-modal .fr-actions-grid { display: grid; gap: 10px; } #fr-banner .fr-actions { margin-bottom: 15px; } #fr-modal .fr-actions-grid { margin-top: 25px; margin-bottom: 10px; } #fr-banner .fr-actions .fr-btn, #fr-modal .fr-actions-grid .fr-btn { width: 100%; } #fr-banner .fr-actions.fr-actions-full-col, #fr-modal .fr-actions-grid.fr-actions-full-col { grid-template-columns: 1fr; } #fr-banner .fr-actions.fr-actions-two-col, #fr-modal .fr-actions-grid.fr-actions-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* In modal two-column mode, the final action spans full width */ #fr-modal .fr-actions-grid.fr-actions-two-col .fr-btn:last-child { grid-column: 1 / -1; } /* Optional balancing rule: first button spans full width when needed */ #fr-modal .fr-actions-grid.fr-actions-two-col.fr-actions-first-full .fr-btn:first-child { grid-column: 1 / -1; } /* ================================================================================================ * END SECTION: BUTTONS AND LAYOUTS * ============================================================================================== */ /* ================================================================================================ * START SECTION: MODAL CATEGORIES AND SERVICE CARDS * ============================================================================================== */ /* Wrapper for each category (for example Marketing, Statistics) */ .fr-category { border-bottom: 1px solid var(--fr-border); padding: 15px 0; } .fr-category:last-child { border-bottom: none; } .fr-cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .fr-cat-title { font-weight: 700; font-size: 1.15rem; color: var(--fr-categories-title); } .fr-cat-desc { font-size: 0.85rem; color: var(--fr-text-muted, #635a4d); margin: 0; } /* Category accordion toggle */ .fr-accordion-toggle { background: none; border: none; color: var(--fr-accordion); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0; text-align: left; display: inline-flex; align-items: center; gap: 6px; } .fr-accordion-toggle:hover { color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } .fr-accordion-content { display: none; margin-top: 15px; border-top: 1px dashed var(--fr-border); padding-top: 15px; } .fr-accordion-content.fr-open { display: block; } /* Individual service card */ .fr-service-card { background: var(--fr-card-bg, #f8fafc); border: none; border-radius: 4px; padding: 12px; margin-bottom: 10px; } .fr-service-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 400; } .fr-service-name { font-weight: 700; font-size: 0.95rem; color: var(--fr-text, #000); } .fr-service-detail { font-size: 0.8rem; color: var(--fr-text-muted, #475569); margin-bottom: 4px; line-height: 1.4; font-weight: 400; } .fr-service-detail a { color: var(--fr-text-muted, #666); text-decoration: none; } .fr-service-detail a:hover { color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } /* ================================================================================================ * END SECTION: MODAL CATEGORIES AND SERVICE CARDS * ============================================================================================== */ /* ================================================================================================ * START SECTION: COOKIE DETAILS SUB-ACCORDION * ============================================================================================== */ /* Toggle for cookie details inside a service card */ .fr-cookie-toggle { background: none; border: none; color: var(--fr-link-footer, #64748b); font-size: 0.75rem; cursor: pointer; padding: 0; margin-top: 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .fr-cookie-toggle:hover { color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } /* Cookie details container */ .fr-cookie-content { display: none; margin-top: 8px; background: var(--fr-cookie-content-bg, #ffffff); border: 1px solid var(--fr-border); border-radius: 4px; padding: 10px; } .fr-cookie-content.fr-open { display: block; } .fr-cookie-item { border-bottom: 1px solid var(--fr-cookie-item-border, #f1f5f9); padding-bottom: 8px; margin-bottom: 8px; font-size: 0.75rem; color: var(--fr-text-muted, #475569); } .fr-cookie-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .fr-cookie-item strong { color: var(--fr-text); font-size: 0.8rem; display: block; margin-bottom: 2px; } .fr-cookie-item span { font-weight: 400; } /* ================================================================================================ * END SECTION: COOKIE DETAILS SUB-ACCORDION * ============================================================================================== */ /* ================================================================================================ * START SECTION: TOGGLE SWITCH * ============================================================================================== */ /* * Use an invisible native . * The visible switch is .fr-slider layered on top. * :checked styles the slider when the checkbox changes. */ .fr-toggle { position: relative; display: inline-block; width: 40px; height: 22px; border-radius: 22px; flex-shrink: 0; } /* * Native checkbox must cover the switch hit area. width/height: 0 breaks label * activation in some browsers/themes; themes also style input globally. Keep input on top. * Opacity 0 can confuse focus in some UAs — use 0.001 so the control stays clearly focusable. */ .fr-toggle input[type="checkbox"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0.001; cursor: pointer; z-index: 2; appearance: none; -webkit-appearance: none; pointer-events: auto; } /* Keyboard focus: native outline is invisible on near-transparent input, so ring the wrapper */ #fr-banner .fr-toggle input[type="checkbox"]:focus, #fr-modal .fr-toggle input[type="checkbox"]:focus { outline: none; } #fr-banner .fr-toggle:focus-within, #fr-modal .fr-toggle:focus-within { outline: 2px solid #000000; outline-offset: 2px; } .fr-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: var(--fr-slider-off, #cbd5e1); transition: 0.4s; border-radius: 22px; pointer-events: none; } /* Switch knob */ .fr-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: var(--fr-slider-knob, white); transition: 0.4s; border-radius: 50%; } /* Checked state */ input:checked + .fr-slider { background-color: var(--fr-accent); } input:checked + .fr-slider:before { transform: translateX(18px); } /* Move knob to the right */ /* Disabled state (for example required categories) */ input:disabled + .fr-slider { opacity: 0.5; cursor: not-allowed; } /* ================================================================================================ * END SECTION: TOGGLE SWITCH * ============================================================================================== */ /* ================================================================================================ * START SECTION: COOKIE/LEGAL INFO DROPDOWN * ============================================================================================== */ .fr-legal-dropdown { margin-top: 15px; margin-bottom: 5px; border-top: 1px dashed var(--fr-border); padding-top: 12px; } .fr-legal-dropdown .fr-legal-toggle { background: none; border: none; color: var(--fr-btn-legal-toggle-text, var(--fr-text)); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; text-align: left; display: flex; align-items: center; width: 100%; gap: 8px; justify-content: center; } .fr-legal-dropdown .fr-legal-toggle .fr-btn-icon { position: relative; } .fr-legal-dropdown .fr-legal-toggle.fr-open { color: #0073e6; } .fr-legal-dropdown .fr-legal-toggle.fr-open .fr-legal-toggle-text { color: #0073e6; } .fr-legal-dropdown .fr-legal-toggle.fr-open .fr-btn-icon { color: #0073e6; } .fr-legal-dropdown .fr-legal-toggle.fr-open .fr-chevron svg path { fill: #0073e6 !important; } #fr-banner .fr-legal-dropdown .fr-legal-toggle:hover { text-decoration: none; color: var(--elarb-blue, var(--fr-accent)); } .fr-legal-dropdown .fr-legal-toggle:hover .fr-chevron svg path, .fr-legal-dropdown .fr-legal-toggle:focus .fr-chevron svg path, .fr-legal-dropdown .fr-legal-toggle:focus-visible .fr-chevron svg path { fill: #0080ff !important; } .fr-legal-content { display: none; margin-top: 12px; padding: 12px; background: var(--fr-legal-content-bg, #f8fafc); border: 1px solid var(--fr-border); border-radius: 4px; font-size: 0.8rem; line-height: 1.5; color: var(--fr-text-muted, #475569); max-height: 40vh; overflow-y: auto; font-weight: 400; } .fr-legal-content.fr-open { display: block; } .fr-legal-dropdown .fr-legal-toggle:focus-visible { background: none; } /* ================================================================================================ * END SECTION: COOKIE/LEGAL INFO DROPDOWN * ============================================================================================== */ /* ================================================================================================ * START SECTION: LANGUAGE SWITCHER * ============================================================================================== */ .fr-lang-switcher { margin-top: 10px; margin-bottom: 5px; text-align: center; font-size: 0.8rem; text-transform: uppercase; font-weight: 600; } .fr-lang-switcher a { color: var(--fr-link-footer, #64748b); text-decoration: none; } .fr-lang-switcher a:hover { color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } .fr-lang-switcher .fr-lang-current { color: #0073e6; font-weight: 600; } .fr-lang-switcher .fr-lang-sep { color: var(--fr-text-muted, #475569); margin: 0 0.2em; } /* WPML switcher markup rendered inside .fr-lang-switcher */ .fr-lang-switcher .wpml-ls, .fr-lang-switcher .wpml-ls ul { display: inline-flex; gap: 0.5em; list-style: none; margin: 0; padding: 0; justify-content: center; align-items: center; flex-wrap: wrap; } .fr-lang-switcher .wpml-ls li { margin: 0; } .fr-lang-switcher .wpml-ls a { color: var(--fr-link-footer, #64748b); text-decoration: none; background: none; border: none; padding: 0; } .fr-lang-switcher .wpml-ls a:hover { color: var(--elarb-blue, var(--fr-accent)); } .fr-lang-switcher .wpml-ls-current-language > a, .fr-lang-switcher .wpml-ls-current-language > a span { color: #0073e6; font-weight: 600; } .fr-lang-switcher .wpml-ls-flag { display: none; } /* ================================================================================================ * END SECTION: LANGUAGE SWITCHER * ============================================================================================== */ /* ================================================================================================ * START SECTION: FOOTER LINKS AND FLOATING TRIGGER * ============================================================================================== */ .fr-links-footer { font-size: 0.85rem; text-align: center; margin-top: 15px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.35em; } .fr-links-footer a { color: var(--fr-link-footer, #000); text-decoration: none; font-weight: 500; } .fr-links-footer a:hover { color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } .fr-links-footer .fr-links-sep { color: var(--fr-link-footer, #64748b); opacity: 0.85; user-select: none; } .fr-powered { text-align: center; font-size: 0.7rem; color: var(--fr-powered, #94a3b8); margin-top: 15px; font-weight: 400; } .fr-powered a { color: var(--fr-powered, #94a3b8); font-weight: 600; } .fr-powered a:hover { color: var(--elarb-blue, var(--fr-accent)); text-decoration: none; } /* Floating cookie trigger: circular by default, expands on hover */ #fr-trigger { position: fixed; bottom: 1.8em; right: 2.75em; z-index: 999997; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 60px; padding: 0; margin: 0; border: 1px solid #ffffff; border-radius: 50%; background: transparent; box-shadow: var(--fr-trigger-shadow, 0 4px 15px rgba(0, 0, 0, 0.1)); font-family: var(--fr-font-family, inherit); font-size: var(--fr-trigger-font-size, 16px); font-weight: 600; cursor: pointer !important; overflow: hidden; white-space: nowrap; gap: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #fr-trigger:hover, #fr-trigger:focus-visible { max-width: 16em; justify-content: flex-start; padding: 0 0.75em 0 0; border-radius: 20px; background: transparent; border-color: #ffffff; cursor: pointer !important; } #fr-trigger:focus-visible { outline: 2px solid #000000; outline-offset: 2px; } #fr-trigger .fr-btn-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 4em; height: 4em; color: var(--fr-trigger-icon, #e1a932); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #fr-trigger .fr-btn-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; } #fr-trigger .fr-btn-icon svg path { fill: currentColor; } #fr-trigger:hover .fr-btn-icon, #fr-trigger:focus-visible .fr-btn-icon { transform: rotate(180deg); } #fr-trigger .fr-trigger-label { display: inline-block; color: var(--fr-trigger-label); white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease, color 0.35s ease; } #fr-trigger:hover .fr-trigger-label, #fr-trigger:focus-visible .fr-trigger-label { max-width: 12em; opacity: 1; } @media (max-width: 960px) { /* Keep banner centered on mobile (override desktop translateY behavior) */ #fr-banner { top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%) scale(0.98); width: calc(100% - 24px); max-width: 500px; margin: 0; } #fr-banner.fr-show, #fr-banner.fr-show.fr-legal-expanded { transform: translate(-50%, -50%) scale(1); } #fr-modal { width: calc(100% - 24px); max-width: 800px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.98); } #fr-modal.fr-show { transform: translate(-50%, -50%) scale(1); } #fr-trigger { right: 1rem; } } @media (max-width: 450px) { #fr-trigger:hover, #fr-trigger:focus-visible { max-width: 60px; justify-content: center; padding: 0; border-radius: 50%; background: transparent; border-color: #ffffff; } #fr-modal .fr-actions-grid .fr-btn{ font-size: 13px; } #fr-trigger:hover .fr-btn-icon, #fr-trigger:focus-visible .fr-btn-icon { transform: none; } #fr-trigger:hover .fr-trigger-label, #fr-trigger:focus-visible .fr-trigger-label { max-width: 0; opacity: 0; color: transparent; } } /* ================================================================================================ * END SECTION: FOOTER LINKS AND FLOATING TRIGGER * ============================================================================================== */