/* * FALLREEP CMP - STYLESHEET * Note: Dynamic colors (like --fr-bg, --fr-accent) are injected via PHP into the HTML * based on the settings in fallreep.json. */ /* ========================================================================== CONTAINERS & OVERLAYS ========================================================================== */ /* The dark, semi-transparent backdrop covering the whole screen */ #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; /* Extremely high z-index to stay above theme elements */ display: none; opacity: 0; transition: opacity 0.3s ease; } /* Class to toggle visibility */ #fr-overlay.fr-show { display: block; opacity: 1; } /* Base styling for both the small Banner and the large Modal. Font from JSON (--fr-font-family) or inherit 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); border-radius: var(--fr-radius); box-shadow: var(--fr-box-shadow, 0 20px 25px -5px rgba(0,0,0,0.1)); z-index: 999999; /* Must be higher than the 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 if content exceeds screen height */ } /* Class to toggle visibility and trigger slide-up animation */ .fr-box.fr-show { display: block; opacity: 1; transform: translateX(-50%) translateY(-30%); } /* Lift box a bit less while legal details are expanded */ .fr-box.fr-show.fr-legal-expanded { transform: translateX(-50%) translateY(-3%); } /* Specific overrides for the large Modal (Detailed Settings) */ #fr-modal { max-width: 800px; top: 50%; bottom: auto; /* Center vertically instead of snapping to bottom */ transform: translate(-50%, -50%) scale(0.95); /* Scale down slightly for pop-in animation */ } #fr-modal.fr-show { transform: translate(-50%, -50%) scale(1); } /* ========================================================================== BRANDING & TYPOGRAPHY ========================================================================== */ .fr-header { display: flex; justify-content: flex-start; margin-bottom: 20px; } .fr-logo { max-height: 45px; width: auto; } .fr-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 15px 0; } .fr-text { font-size: 0.9rem; line-height: 1.5; margin: 0 0 20px 0; color: var(--fr-text-muted, #475569); } /* ========================================================================== BUTTONS & LAYOUTS ========================================================================== */ /* Shared button base styling (fallback for buttons without a specific 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 { background: var(--fr-btn-hover); } /* Per-button colors (from JSON colors.buttons; 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 { 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 { 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 { 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 { background: var(--fr-btn-custom-hover); } .fr-btn-save { background: var(--fr-btn-save-bg); color: var(--fr-btn-save-text); } .fr-btn-save:hover { background: var(--fr-btn-save-hover); } .fr-btn-back { background: var(--fr-btn-back-bg); color: var(--fr-btn-back-text); } .fr-btn-back:hover { 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 { color: var(--fr-btn-legal-toggle-hover, var(--fr-accent)); } #fr-trigger.fr-btn-trigger { background: var(--fr-btn-trigger-bg); color: var(--fr-btn-trigger-text); border-color: var(--fr-btn-trigger-border, #eee); } #fr-trigger.fr-btn-trigger:hover { background: var(--fr-btn-trigger-hover); } /* Button icons (local SVG, currentColor = inherits button text color for black/white) */ .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-toggle .fr-btn-icon svg { width: 1em; height: 1em; } /* Action layouts are adaptive: - full-column mode keeps all visible buttons at 100% width - two-column mode uses equal 50/50 columns with no empty placeholder items */ #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 visible action always spans full width */ #fr-modal .fr-actions-grid.fr-actions-two-col .fr-btn:last-child { grid-column: 1 / -1; } /* Optional modal rule: if remaining buttons would leave imbalance, first is full width as well */ #fr-modal .fr-actions-grid.fr-actions-two-col.fr-actions-first-full .fr-btn:first-child { grid-column: 1 / -1; } /* ========================================================================== MODAL CATEGORIES & SERVICE CARDS ========================================================================== */ /* Wrapper for each category (e.g., 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: 600; font-size: 1rem; } .fr-cat-desc { font-size: 0.85rem; color: var(--fr-link-footer, #64748b); margin: 0 0 10px 0; } /* Accordion toggler to show/hide services within a category */ .fr-accordion-toggle { background: none; border: none; color: var(--fr-accent); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0; text-align: left; } .fr-accordion-toggle:hover { text-decoration: underline; } .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 (e.g., Google Analytics box) */ .fr-service-card { background: var(--fr-card-bg, #f8fafc); border: 1px solid var(--fr-border); border-radius: 4px; padding: 12px; margin-bottom: 10px; } .fr-service-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .fr-service-name { font-weight: 700; font-size: 0.9rem; color: var(--fr-text); } .fr-service-detail { font-size: 0.8rem; color: var(--fr-text-muted, #475569); margin-bottom: 4px; line-height: 1.4; } .fr-service-detail a { color: var(--fr-accent); text-decoration: none; } .fr-service-detail a:hover { text-decoration: underline; } /* ========================================================================== COOKIE DETAILS SUB-ACCORDION ========================================================================== */ /* Toggle button to show specific cookies 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-block; } .fr-cookie-toggle:hover { color: var(--fr-accent); } /* Container holding the actual cookie details */ .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; } /* ========================================================================== TOGGLE SWITCH (CHECKBOX HACK) ========================================================================== */ /* * We use an invisible native . * The visual switch is the .fr-slider span placed over it. * The :checked pseudo-class styles the slider when the invisible checkbox is toggled. */ .fr-toggle { position: relative; display: inline-block; width: 40px; height: 22px; } .fr-toggle input { opacity: 0; width: 0; height: 0; } .fr-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--fr-slider-off, #cbd5e1); transition: .4s; border-radius: 22px; } /* The circle inside the switch */ .fr-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: var(--fr-slider-knob, white); transition: .4s; border-radius: 50%; } /* State: Checked (Active) */ input:checked + .fr-slider { background-color: var(--fr-accent); } input:checked + .fr-slider:before { transform: translateX(18px); } /* Move circle to the right */ /* State: Disabled (e.g., Essential category cannot be toggled off) */ input:disabled + .fr-slider { opacity: 0.5; cursor: not-allowed; } /* ========================================================================== COOKIE/LEGAL INFO DROPDOWN (Banner + Modal) ========================================================================== */ .fr-legal-dropdown { margin-top: 15px; margin-bottom: 5px; border-top: 1px dashed var(--fr-border); padding-top: 12px; } .fr-legal-toggle { background: none; border: none; color: var(--fr-accent); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0; text-align: left; display: flex; align-items: center; width: 100%; gap: 6px; } .fr-legal-toggle .fr-btn-icon { position: relative; top: 0.08em; } .fr-legal-toggle:hover { text-decoration: underline; } .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; } .fr-legal-content.fr-open { display: block; } /* ========================================================================== LANGUAGE SWITCHER (between USA/Google dropdown and footer links) ========================================================================== */ .fr-lang-switcher { margin-top: 10px; margin-bottom: 5px; text-align: center; font-size: 0.8rem; } .fr-lang-switcher a { color: var(--fr-link-footer, #64748b); text-decoration: none; } .fr-lang-switcher a:hover { text-decoration: underline; } .fr-lang-switcher .fr-lang-current { color: var(--fr-text-muted, #475569); font-weight: 600; } .fr-lang-switcher .fr-lang-sep { color: var(--fr-text-muted, #475569); margin: 0 0.2em; } /* ========================================================================== FOOTER LINKS & FLOATING TRIGGER ========================================================================== */ .fr-links-footer { font-size: 0.8rem; text-align: center; margin-top: 15px; display: flex; justify-content: center; gap: 15px; } .fr-links-footer a { color: var(--fr-link-footer, #64748b); text-decoration: none; } .fr-links-footer a:hover { text-decoration: underline; } .fr-powered { text-align: center; font-size: 0.7rem; color: var(--fr-powered, #94a3b8); margin-top: 15px; } .fr-powered a { color: var(--fr-powered, #94a3b8); text-decoration: none; font-weight: 600; } /* The small floating badge in the bottom left corner to reopen the settings */ #fr-trigger { display: inline-flex; align-items: center; gap: 6px; position: fixed; bottom: 15px; left: 15px; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--fr-btn-trigger-border, #eee); box-shadow: var(--fr-trigger-shadow, 0 2px 10px rgba(0,0,0,0.1)); font-family: var(--fr-font-family, inherit); font-size: var(--fr-trigger-font-size, 12px); cursor: pointer; z-index: 999997; } #fr-trigger .fr-btn-icon svg { width: 1em; height: 1em; }