/* * 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: 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 */ .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: 0 20px 25px -5px rgba(0,0,0,0.1); z-index: 999999; /* Must be higher than the overlay */ padding: 30px; font-family: system-ui, -apple-system, sans-serif; /* Modern, system-native font stack */ 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(0); } /* 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: #475569; } /* ========================================================================== BUTTONS & LAYOUTS ========================================================================== */ /* Shared button base styling */ .fr-btn { 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); } /* Layout for the Small Box (Banner): Buttons are stacked vertically, 100% width */ #fr-banner .fr-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; } #fr-banner .fr-btn { width: 100%; } /* Layout for the Large Box (Modal): Action buttons form a 2-column grid (50% width) */ #fr-modal .fr-actions-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; margin-bottom: 10px; } #fr-modal .fr-actions-grid .fr-btn { width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); } /* The "Back" button spans the full width at the bottom */ #fr-modal .fr-actions-bottom { display: flex; flex-direction: column; gap: 10px; } #fr-modal .fr-btn-full { width: 100%; } /* ========================================================================== 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: #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: #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: #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: #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: #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 #f1f5f9; padding-bottom: 8px; margin-bottom: 8px; font-size: 0.75rem; color: #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: #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: 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; } /* ========================================================================== 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: #64748b; text-decoration: none; } .fr-links-footer a:hover { text-decoration: underline; } .fr-powered { text-align: center; font-size: 0.7rem; color: #94a3b8; margin-top: 15px; } .fr-powered a { color: #94a3b8; text-decoration: none; font-weight: 600; } /* The small floating badge in the bottom left corner to reopen the settings */ #fr-trigger { position: fixed; bottom: 15px; left: 15px; background: #fff; color: #333; padding: 8px 12px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-size: 12px; cursor: pointer; z-index: 999997; border: 1px solid #eee; }