/* Propsly — Bootstrap 5 theme overrides */ :root{ /* core brand tokens */ --propsly-primary: #167891; --propsly-secondary: #FF5FA2; --propsly-accent: #c1eeeb; --propsly-success: #8bd6d4; --propsly-bg: #F6F7FB; --propsly-surface: #ffffff; --propsly-text: #1E2430; --propsly-radius: 8px; --propsly-shadow: 0 6px 18px rgba(30,36,48,0.06); } /* DARK THEME (toggle by adding class 'dark' on or using data-theme="dark") */ body.dark, body[data-theme="dark"] { --propsly-bg: #0F1724; --propsly-surface: #0B1220; --propsly-text: #F6F7FB; --propsly-primary: #5FA0FF; /* slightly lighter for contrast */ } /* Base page */ body{ background-color: var(--propsly-bg) !important; color: var(--propsly-text) !important; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Containers / cards */ .card, .modal-content, .dropdown-menu { background-color: var(--propsly-surface) !important; border-radius: var(--propsly-radius) !important; box-shadow: var(--propsly-shadow) !important; color: var(--propsly-text) !important; } /* Buttons */ .btn-primary { background-color: var(--propsly-primary) !important; border-color: var(--propsly-primary) !important; color: #fff !important; border-radius: var(--propsly-radius) !important; box-shadow: none !important; } .btn-primary:hover, .btn-primary:focus { background-color: black !important; border-color: black !important; transform: translateY(-1px); } .btn-secondary { background-color: var(--propsly-secondary) !important; border-color: var(--propsly-secondary) !important; color: #fff !important; } .btn-outline-secondary:hover, .btn-secondary:focus { background-color: #c5f1ef !important; border-color: #c5f1ef !important; transform: translateY(-1px); } /* Utility color helpers */ .bg-primary { background-color: var(--propsly-primary) !important; color: #fff !important; } .text-primary { color: var(--propsly-primary) !important; } .bg-secondary { background-color: var(--propsly-secondary) !important; color: #fff !important; } .text-secondary { color: var(--propsly-secondary) !important; } .bg-accent { background-color: var(--propsly-accent) !important; color: #172023 !important; } .text-accent { color: var(--propsly-accent) !important; } .bg-success { background-color: var(--propsly-success) !important; color: #072e1f !important; } /* Badges */ .badge-propsly { background-color: var(--propsly-secondary); color: #fff; border-radius: 9999px; padding: .25em .5em; font-weight:600; } /* Alerts / toasts */ .toast-propsly { background: linear-gradient(90deg, var(--propsly-accent), var(--propsly-primary)); color: #172023; border-radius: var(--propsly-radius); } /* Navbars */ .navbar-propsly { background-color: var(--propsly-surface); box-shadow: 0 4px 12px rgba(30,36,48,0.06); } .navbar-propsly .navbar-brand { color: var(--propsly-primary); font-weight:600; } .navbar-propsly .nav-link.active { color: var(--propsly-primary) !important; } /* Form control focus */ .form-control:focus, .form-select:focus { border-color: var(--propsly-primary) !important; box-shadow: 0 0 0 .15rem rgba(79,139,255,0.3) !important; } /* Inputs / chips */ .input-propsly { border-radius: calc(var(--propsly-radius) / 1.2); } /* Card header */ .card .card-header { background: transparent; border-bottom: 1px solid rgba(30,36,48,0.05); } /* Small utilities */ .rounded-propsly { border-radius: var(--propsly-radius) !important; } .shadow-soft { box-shadow: var(--propsly-shadow) !important; } /* Accent gradient */ .propsly-gradient { background: linear-gradient(90deg, var(--propsly-primary) 0%, var(--propsly-secondary) 60%, var(--propsly-accent) 100%); color: #fff; } /* Avatar / icon styles */ .propsly-avatar { width: 40px; height: 40px; border-radius: 8px; display:inline-flex; align-items:center; justify-content:center; background:var(--propsly-primary); color:#fff; font-weight:600; } /* Brand logo images */ .brand-logo-img { height: 36px; width: auto; } .brand-logo-img-lg { height: 56px; width: auto; } /* Confetti pill pseudo-element */ .confetti-pill::after{ content: "\1F389"; margin-left: .5rem; } /* Accessibility helper */ :focus{ outline: 3px solid rgba(79,139,255,0.25); outline-offset: 2px; } /* Responsive tweaks */ @media (max-width: 576px) { .navbar-propsly { padding: .5rem 1rem; } } /* =========================================== Feature Gating Styles - Pro Feature Locks =========================================== */ /* Base locked container */ .pro-locked { position: relative; overflow: hidden; } /* Blurred content behind overlay */ .pro-locked-content { filter: blur(4px); pointer-events: none; user-select: none; opacity: 0.7; } /* Overlay container */ .pro-locked-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; padding: 24px; text-align: center; border-radius: inherit; } /* Pro badge icon */ .pro-badge-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #0a576e, #2596be); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 4px 16px rgba(79, 139, 255, 0.25); } .pro-badge-icon span { font-size: 24px; } /* Pro feature title */ .pro-locked-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: var(--propsly-text); margin-bottom: 8px; } /* Pro feature description */ .pro-locked-description { color: #6B7280; font-size: 14px; margin-bottom: 20px; max-width: 280px; line-height: 1.5; } /* Upgrade button */ .btn-upgrade-pro { background: linear-gradient(135deg, #0a576e, #2596be); color: white; border: none; padding: 12px 28px; border-radius: var(--propsly-radius); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(79, 139, 255, 0.25); } .btn-upgrade-pro:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79, 139, 255, 0.35); color: white; text-decoration: none; } /* Compact stat card locked state */ .stat-card.pro-locked { min-height: 120px; } .stat-card .pro-locked-overlay { padding: 16px; } .stat-card .pro-badge-icon { width: 40px; height: 40px; margin-bottom: 8px; } .stat-card .pro-badge-icon span { font-size: 18px; } .stat-card .pro-locked-title { font-size: 14px; margin-bottom: 4px; } .stat-card .pro-locked-description { font-size: 12px; margin-bottom: 12px; } .stat-card .btn-upgrade-pro { padding: 8px 16px; font-size: 12px; } /* Section card locked state */ .section-card.pro-locked { min-height: 200px; } /* Settings input locked state */ .form-group-locked .form-control, .form-group-locked .form-select { pointer-events: none; opacity: 0.5; background: #F3F4F6; } /* Inline Pro feature prompt (for settings) */ .pro-feature-inline { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 16px; background: rgba(79, 139, 255, 0.08); border-radius: var(--propsly-radius); border: 1px dashed var(--propsly-primary); } .pro-feature-inline .pro-pill { background: linear-gradient(135deg, #0a576e, #2596be); color: white; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.5px; } .pro-feature-inline span { color: #6B7280; font-size: 13px; } .pro-feature-inline a { color: var(--propsly-primary); font-weight: 500; text-decoration: none; margin-left: auto; } .pro-feature-inline a:hover { text-decoration: underline; } /* Responsive adjustments for feature gating */ @media (max-width: 768px) { .pro-locked-overlay { padding: 16px; } .pro-locked-title { font-size: 16px; } .pro-locked-description { font-size: 13px; } .pro-feature-inline { flex-wrap: wrap; } .pro-feature-inline a { margin-left: 0; margin-top: 8px; width: 100%; } .alert-success { background-color: #c1eeeb !important; color: #155724 !important; } }