/* Connect+ Theme System — Dark / Pink Set data-theme on ; tokens cascade site-wide. */ /* ── Shared structural tokens (theme-independent) ── */ html { --radius-md: 0.85rem; --radius-lg: 1.1rem; --radius-xl: 1.5rem; --blur-glass: 14px; --blur-nav: 18px; --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1); /* Fixed overlay stack: navbar + safe area (MOTD, flash toasts) */ --global-overlay-top: calc(62px + env(safe-area-inset-top, 0px)); --global-overlay-z: 1040; } html[data-native-shell="android"] { --global-overlay-top: calc(44px + var(--native-status-top, 0px) + 0.35rem); } /* ══════════════════════════════════════ DARK — luxury gold / warm charcoal (default) ══════════════════════════════════════ */ [data-theme="dark"], html:not([data-theme]) { --color-bg: #0c0a08; --color-bg-elevated: #141210; --color-surface: rgba(20, 18, 16, 0.92); --color-surface-glass: rgba(20, 18, 16, 0.88); --color-surface-hover: rgba(30, 24, 18, 0.96); /* Opaque — semi-transparent rgba vanished on backdrop-filter glass panels */ --color-surface-input: #2a2218; --color-text: #faf6ef; --color-text-muted: rgba(250, 246, 239, 0.64); --color-text-inverse: #0c0a08; --color-accent: #c5a059; --color-accent-light: #e8c872; --color-accent-dark: #9a7b2f; --color-accent-muted: rgba(197, 160, 89, 0.48); --color-accent-glow: rgba(197, 160, 89, 0.38); --color-accent-hover-bg: rgba(197, 160, 89, 0.16); --color-border: rgba(255, 248, 240, 0.08); --color-border-accent: rgba(197, 160, 89, 0.28); --color-border-strong: rgba(197, 160, 89, 0.42); --color-nav-bg: rgba(12, 10, 8, 0.62); --color-nav-text: rgba(250, 246, 239, 0.94); --color-nav-text-muted: rgba(250, 246, 239, 0.62); --color-nav-highlight: rgba(255, 248, 240, 0.06); --color-footer-bg: rgba(12, 10, 8, 0.76); --color-success: #2ea86a; --color-danger: #e05260; --color-warning: #e6b84d; --color-info: #5b9fd4; --color-shadow: rgba(8, 4, 2, 0.52); --color-shadow-strong: rgba(8, 4, 2, 0.68); --color-overlay-top: rgba(12, 8, 6, 0.38); --color-overlay-mid: rgba(40, 24, 18, 0.1); --color-overlay-bottom: rgba(12, 8, 6, 0.46); --color-motd-bg-start: rgba(184, 134, 11, 0.98); --color-motd-bg-end: rgba(255, 215, 0, 0.92); --color-motd-border: #9a7b2f; --color-motd-text: #000; --color-platinum-nav-start: #6f767e; --color-platinum-nav-mid: #8f979f; --color-platinum-nav-end: #9ca3ab; --meta-theme-color: #0c0a08; /* Semantic theme tokens */ --theme-accent: #c5a059; --theme-surface: #141210; --theme-btn-primary-bg: var(--color-accent); --theme-btn-primary-text: var(--color-text-inverse); --theme-btn-primary-border: var(--color-accent-dark); --theme-btn-secondary-bg: var(--color-surface-hover); --theme-btn-secondary-text: var(--color-text); --theme-link: var(--color-accent-light); --theme-table-header: var(--color-accent-light); --theme-table-bg: var(--color-surface); --theme-table-stripe: var(--color-surface-hover); --theme-input-bg: var(--color-surface-input); --theme-input-border: var(--color-border-accent); --theme-card-bg: var(--color-surface); --theme-badge-bg: var(--color-accent); --theme-badge-text: var(--color-text-inverse); --theme-progress-bg: var(--color-accent-hover-bg); --theme-progress-fill: var(--color-accent); --theme-timer: var(--color-accent-light); /* Legacy page aliases (used by page-specific CSS) */ --gold: var(--color-accent); --gold-light: var(--color-accent-light); --gold-2: var(--color-accent-dark); --gold-glow: var(--color-accent-glow); --text: var(--color-text); --muted: var(--color-text-muted); --line: var(--color-border); --bg-0: var(--color-bg); --bg-1: var(--color-bg-elevated); --bg-2: var(--color-surface); --bg-3: var(--color-surface-hover); --good: var(--color-success); --danger: var(--color-danger); } /* ══════════════════════════════════════ PINK — cherry blossom night + gold jewelry ══════════════════════════════════════ */ [data-theme="pink"] { --color-bg: #2a1520; --color-bg-elevated: #3d1f2e; --color-surface: rgba(48, 26, 38, 0.92); --color-surface-glass: rgba(42, 22, 34, 0.88); --color-surface-hover: rgba(58, 32, 48, 0.96); /* Opaque — semi-transparent rgba vanished on backdrop-filter glass panels */ --color-surface-input: #4a2538; --color-text: #faf3ea; --color-text-muted: rgba(250, 243, 234, 0.62); --color-text-inverse: #2a1520; /* Gold accents — same signet-ring palette as dark */ --color-accent: #c5a059; --color-accent-light: #e8c872; --color-accent-dark: #9a7b2f; --color-accent-muted: rgba(197, 160, 89, 0.45); --color-accent-glow: rgba(197, 160, 89, 0.35); --color-accent-hover-bg: rgba(197, 160, 89, 0.15); --color-border: rgba(255, 192, 203, 0.1); --color-border-accent: rgba(197, 160, 89, 0.22); --color-border-strong: rgba(197, 160, 89, 0.35); --color-nav-bg: rgba(42, 21, 32, 0.68); --color-nav-text: rgba(250, 243, 234, 0.94); --color-nav-text-muted: rgba(250, 243, 234, 0.58); --color-nav-highlight: rgba(255, 183, 197, 0.06); --color-footer-bg: rgba(42, 21, 32, 0.8); --color-success: #5cb88a; --color-danger: #e06b7a; --color-warning: #e8b86d; --color-info: #8bafd4; --color-shadow: rgba(20, 8, 14, 0.5); --color-shadow-strong: rgba(20, 8, 14, 0.65); --color-overlay-top: rgba(42, 21, 32, 0.52); --color-overlay-mid: rgba(255, 182, 193, 0.14); --color-overlay-bottom: rgba(42, 21, 32, 0.58); --color-motd-bg-start: rgba(184, 134, 11, 0.98); --color-motd-bg-end: rgba(255, 215, 0, 0.92); --color-motd-border: #9a7b2f; --color-motd-text: #000; --color-platinum-nav-start: #7a6870; --color-platinum-nav-mid: #a89098; --color-platinum-nav-end: #c4b0b8; --meta-theme-color: #2a1520; /* Cherry blossom reference tokens */ --theme-blossom-blush: #ffc0cb; --theme-blossom-cherry: #ffb7c5; --theme-blossom-deep: #8b4a62; --theme-accent: #c5a059; --theme-surface: #2a1520; --theme-btn-primary-bg: var(--color-accent); --theme-btn-primary-text: var(--color-text-inverse); --theme-btn-primary-border: var(--color-accent-dark); --theme-btn-secondary-bg: var(--color-surface-hover); --theme-btn-secondary-text: var(--color-text); --theme-link: var(--color-accent-light); --theme-table-header: var(--color-accent-light); --theme-table-bg: var(--color-surface); --theme-table-stripe: var(--color-surface-hover); --theme-input-bg: var(--color-surface-input); --theme-input-border: var(--color-border-accent); --theme-card-bg: var(--color-surface); --theme-badge-bg: var(--color-accent); --theme-badge-text: var(--color-text-inverse); --theme-progress-bg: var(--color-accent-hover-bg); --theme-progress-fill: var(--color-accent); --theme-timer: var(--color-accent-light); --gold: var(--color-accent); --gold-light: var(--color-accent-light); --gold-2: var(--color-accent-dark); --gold-glow: var(--color-accent-glow); --text: var(--color-text); --muted: var(--color-text-muted); --line: var(--color-border); --bg-0: var(--color-bg); --bg-1: var(--color-bg-elevated); --bg-2: var(--color-surface); --bg-3: var(--color-surface-hover); --good: var(--color-success); --danger: var(--color-danger); } /* ══════════════════════════════════════ BASE LAYOUT (theme-aware) ══════════════════════════════════════ */ html { background-color: var(--color-bg); overflow-x: hidden; max-width: 100%; } body { background-color: var(--color-bg); color: var(--color-text); min-height: 100vh; display: flex; flex-direction: column; padding: 0; margin: 0; position: relative; width: 100%; max-width: 100%; overflow-x: hidden; } .site-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background-color: var(--color-bg); } .site-background__layer { position: absolute; background-repeat: no-repeat; background-position: center center; background-size: cover; } .site-background__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, var(--color-overlay-top) 0%, var(--color-overlay-mid) 35%, var(--color-overlay-mid) 65%, var(--color-overlay-bottom) 100% ); } /* Web/browser only — cover + bleed scaling (APK unchanged below) */ html:not([data-native-shell]) .site-background__layer { inset: -22%; min-width: 144%; min-height: 144%; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat; } @media (max-width: 991px) { html:not([data-native-shell]) .site-background__layer { inset: -25%; min-width: 150%; min-height: 150%; background-size: cover !important; background-position: center center !important; } html:not([data-native-shell]) .site-background__overlay { opacity: 0.92; } /* APK/native: diamond-visible height-led scale */ html[data-native-shell] .site-background__layer { inset: 0; background-size: auto min(94vh, 168vw); background-position: center center; } html[data-native-shell] .site-background { background-color: var(--color-bg); } html[data-native-shell] .site-background__overlay { opacity: 1; background: linear-gradient( 180deg, var(--color-overlay-top) 0%, var(--color-overlay-mid) 35%, var(--color-overlay-mid) 65%, var(--color-overlay-bottom) 100% ), var(--color-surface); background-blend-mode: normal, multiply; } } @media (min-width: 992px) { html:not([data-native-shell]) .site-background__layer { inset: -20%; min-width: 140%; min-height: 140%; background-size: cover !important; background-position: center center !important; } html:not([data-native-shell]) .site-background__overlay { opacity: 0.92; } html[data-native-shell] .site-background__layer { inset: -18%; background-size: cover; background-position: center center; } html[data-native-shell] .site-background__overlay { opacity: 0.92; } } [data-theme="pink"] .site-background__layer { filter: hue-rotate(318deg) saturate(1.3) brightness(0.94) contrast(1.02); } [data-theme="pink"] .site-background__overlay { background: linear-gradient( 180deg, rgba(42, 21, 32, 0.5) 0%, rgba(255, 182, 193, 0.15) 32%, rgba(255, 183, 197, 0.2) 68%, rgba(42, 21, 32, 0.55) 100% ); } /* Keep chrome above fixed background (z-index: 0) */ .custom-navbar, .site-footer { position: relative; z-index: 1; } /* Site main — single content layer, no frame chrome */ .site-main { position: relative; z-index: 1; margin: 0; padding: clamp(0.5rem, 2vw, 1rem) clamp(0.75rem, 2vw, 1.25rem); max-width: 100%; width: 100%; box-sizing: border-box; overflow-x: clip; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Prevent nested duplicate glass surfaces — one backdrop-filter stack per page */ .content-overlay { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; outline: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-main .app-glass .app-glass, .site-main .app-page-surface .app-page-surface, .site-main .app-glass .app-page-surface, .site-main .app-page-surface .app-glass, .auth-wrapper .auth-card .auth-card, .glass-form-page .glass-card .glass-card { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Habit / presets inner panels — flat, no nested blur */ .app-page-surface .day-card, .app-page-surface .habit-item, .app-page-surface .habit-preset-combo, .app-page-surface .habit-add-combo, .app-page-surface .preset-item, .app-page-surface .preset-add-combo, .app-page-surface .preset-habit-combo, .app-page-surface .presets-header, .app-page-surface .habit-tracker-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-main .row > [class*="offset-"] { margin-left: 0 !important; } .site-main .row > [class*="col-"] { max-width: 100%; } .site-main h1, .site-main h2, .site-main h3, .site-main h4, .site-main h5, .site-main h6 { text-align: center !important; } .container-fluid { overflow: visible !important; max-width: 100%; } /* Flash messages — fixed toast overlay below navbar (no layout push) */ .flash-container, .global-overlay-alerts { position: fixed; top: var(--global-overlay-top); left: 50%; transform: translateX(-50%); z-index: var(--global-overlay-z); width: min(420px, calc(100vw - 1.5rem)); max-width: min(420px, calc(100vw - 1.5rem)); margin: 0; padding: 0; pointer-events: none; } .flash-container .alert, .global-overlay-alerts .alert { margin-bottom: 0.5rem; opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; border-radius: 12px; border: none; text-align: center; box-shadow: 0 6px 20px var(--color-shadow); pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .alert { margin-bottom: 10px; opacity: 0; transition: opacity 0.5s ease-in-out; border-radius: 12px; border: none; text-align: center; box-shadow: 0 6px 20px var(--color-shadow); pointer-events: auto; backdrop-filter: blur(8px); } .flash-container .alert.show, .global-overlay-alerts .alert.show, .alert.show { opacity: 1; } /* When MOTD is visible, stack flash toasts beneath it */ body:has(.motd-slot .motd-banner) .flash-container, body:has(.motd-slot .motd-banner) .global-overlay-alerts { top: calc(var(--global-overlay-top) + 5.5rem); } .alert-restart { background: linear-gradient(135deg, var(--color-danger), #b02a37); color: #fff; font-weight: bold; border: 2px solid #b02a37; padding: 15px; box-shadow: 0 0 25px rgba(220, 53, 69, 0.5); } @media (max-width: 991px) { .site-main { padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.65rem, 2vw, 1rem); margin: 0; } } @media (max-width: 768px) { .flash-container, .global-overlay-alerts { width: min(420px, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); } } /* ══════════════════════════════════════ THEME PICKER (account page) ══════════════════════════════════════ */ .theme-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin-top: 0.75rem; } @media (max-width: 576px) { .theme-picker { grid-template-columns: 1fr; } } .theme-picker__option { position: relative; cursor: pointer; } .theme-picker__option input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-picker__card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 0.75rem; border-radius: var(--radius-md); border: 2px solid var(--color-border); background: var(--color-surface); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .theme-picker__option input:focus-visible + .theme-picker__card { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-picker__option input:checked + .theme-picker__card, .theme-picker__option.active .theme-picker__card { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-hover-bg), 0 8px 24px var(--color-shadow); } .theme-picker__option:hover .theme-picker__card { transform: translateY(-2px); border-color: var(--color-border-strong); } .theme-picker__swatch { width: 100%; height: 3.5rem; border-radius: 0.5rem; display: flex; overflow: hidden; border: 1px solid var(--color-border); } .theme-picker__swatch-dark { background: linear-gradient(135deg, #0c0a08 35%, #3d2e18 65%, #c5a059 100%); } .theme-picker__swatch-pink { background: linear-gradient(135deg, #2a1520 30%, #8b4a62 55%, #c5a059 100%); } .theme-picker__label { font-weight: 600; font-size: 0.9rem; color: var(--color-text); } .theme-picker__desc { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; } /* Platinum navbar — theme-adjusted mobile collapse */ [data-theme="pink"] .platinum-navbar { border-color: rgba(197, 160, 89, 0.35); box-shadow: 0 10px 40px var(--color-shadow), 0 0 20px rgba(197, 160, 89, 0.15); } [data-theme="pink"] .platinum-navbar::after { background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.35) 50%, transparent); } [data-theme="pink"] .platinum-navbar .navbar-collapse { background: linear-gradient( 180deg, rgba(61, 31, 46, 0.98) 0%, rgba(42, 21, 32, 0.98) 100% ); } /* ══════════════════════════════════════ SITE ANIMATIONS ══════════════════════════════════════ */ @keyframes cp-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Native shell: opacity-only entrance — avoids translateY scroll jank on APK launch */ @keyframes cp-fade-in-native { from { opacity: 0; } to { opacity: 1; } } /* Safety: account inputs must stay visible even if stale JS/CSS leaves opacity at 0 */ .account-page .form-control, .account-page .input-group-text, .account-page input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), .account-page select, .account-page textarea { opacity: 1 !important; visibility: visible !important; } @media (prefers-reduced-motion: no-preference) { .site-main a, .site-main button, .site-main .btn, .site-main .card, .site-main .accordion-button, .site-main input, .site-main select, .site-main textarea, .site-main .form-control, .site-main .dropdown-menu, .site-main .modal-content, .site-main .table tbody tr, .auth-page .auth-card, .auth-page .btn-auth-primary, .auth-page .form-control { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease, opacity 0.2s ease; } .site-main > *, .auth-wrapper > * { animation: cp-fade-in 0.35s ease-out both; } html[data-native-shell] .custom-navbar, html[data-native-shell] .site-footer { animation: cp-fade-in-native 0.22s ease-out both; } html[data-native-shell] .site-main > *, html[data-native-shell] .auth-wrapper > *, html[data-native-shell] .app-page-surface, html[data-native-shell] .app-glass, html[data-native-shell] .auth-card, html[data-native-shell] .index-link-card, html[data-native-shell] .app-tile, html[data-native-shell] .customers-card, html[data-native-shell] .connection-card, html[data-native-shell] .account-section, html[data-native-shell] .glass-form-page .glass-card { animation: cp-fade-in-native 0.28s ease-out both; } html[data-native-shell] .index-link-card:hover, html[data-native-shell] .app-tile:hover, html[data-native-shell] .customers-card:hover, html[data-native-shell] .connection-card.dark-card:hover, html[data-native-shell] .account-info-item:hover, html[data-native-shell] .theme-picker__option:hover .theme-picker__card, html[data-native-shell] .customers-fab:hover, html[data-native-shell] .connections-fab:hover { transform: none !important; } .site-main > *:nth-child(1), .auth-wrapper > *:nth-child(1) { animation-delay: 0.02s; } .site-main > *:nth-child(2), .auth-wrapper > *:nth-child(2) { animation-delay: 0.05s; } .site-main > *:nth-child(3), .auth-wrapper > *:nth-child(3) { animation-delay: 0.08s; } .site-main > *:nth-child(4), .auth-wrapper > *:nth-child(4) { animation-delay: 0.11s; } .site-main > *:nth-child(5), .auth-wrapper > *:nth-child(5) { animation-delay: 0.14s; } .index-link-card, .app-tile, .app-page.sc-page .sc-row, .customers-card, .connection-card.dark-card, .account-info-item, .account-section, .account-action-item .btn, .app-page-surface, .app-glass, .glass-form-page .glass-card, .theme-picker__option { transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .index-links-grid .index-link-card:nth-child(1) { animation-delay: 0.04s; } .index-links-grid .index-link-card:nth-child(2) { animation-delay: 0.07s; } .index-links-grid .index-link-card:nth-child(3) { animation-delay: 0.10s; } .index-links-grid .index-link-card:nth-child(4) { animation-delay: 0.13s; } .index-links-grid .index-link-card:nth-child(5) { animation-delay: 0.16s; } .index-links-grid .index-link-card:nth-child(6) { animation-delay: 0.19s; } .index-links-grid .index-link-card:nth-child(7) { animation-delay: 0.22s; } .index-links-grid .index-link-card:nth-child(8) { animation-delay: 0.25s; } .app-card-grid .app-tile:nth-child(n), .customers-grid .customers-card:nth-child(n), .connection-list .connection-card:nth-child(n) { animation: cp-fade-in 0.35s ease-out both; } .app-card-grid .app-tile:nth-child(1), .customers-grid .customers-card:nth-child(1), .connection-list .connection-card:nth-child(1) { animation-delay: 0.04s; } .app-card-grid .app-tile:nth-child(2), .customers-grid .customers-card:nth-child(2), .connection-list .connection-card:nth-child(2) { animation-delay: 0.08s; } .app-card-grid .app-tile:nth-child(3), .customers-grid .customers-card:nth-child(3), .connection-list .connection-card:nth-child(3) { animation-delay: 0.12s; } .app-card-grid .app-tile:nth-child(4), .customers-grid .customers-card:nth-child(4), .connection-list .connection-card:nth-child(4) { animation-delay: 0.16s; } .app-card-grid .app-tile:nth-child(5), .customers-grid .customers-card:nth-child(5), .connection-list .connection-card:nth-child(5) { animation-delay: 0.20s; } .app-card-grid .app-tile:nth-child(6), .customers-grid .customers-card:nth-child(6), .connection-list .connection-card:nth-child(6) { animation-delay: 0.24s; } .index-link-card:hover, .app-tile:hover, .app-page.sc-page .sc-row:hover, .customers-card:hover, .connection-card.dark-card:hover, .account-info-item:hover { transform: translateY(-2px); } .site-main .btn:active, .auth-page .btn-auth-primary:active { transform: scale(0.98); } .accordion-body, .collapse.show { transition: opacity 0.25s ease; } .theme-picker__card { transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), background-color 0.2s ease; } .customers-fab, .connections-fab, .pipeline-wrap .action-card, .pipeline-wrap .pipeline-card, .performance-dashboard .action-card, .performance-dashboard .metric-card, .habit-tracker-container .habit-card, .habit-tracker-container .day-cell, .presets-container .preset-card, .schedule-container .schedule-card, .prospects-page .prospect-card, .structure-page .tree-wrapper, .reorder-page .reorder-item, .add-connection-page .connection-card, .glass-form-page .form-control, .glass-form-page .btn-glow, .account-page .input-group-text, .account-page .theme-picker__card, .admin-page .card, .admin-page .table, .contact-page .app-page-surface, .bug-report-page .glass-card, .feature-request-page .glass-card, .view-bug-reports-page .report-card, .view-feature-requests-page .request-card, .email-all-page .app-section, .motd-admin-page .app-section, .scheduler-page .schedule-row, .scorecard-page .sc-row, .fill-scorecard-page .metric-block, .view-scores-page .score-row, .time-tracker-page .tt-panel, .habit-tracker-page .habit-card, .card-schedule-page .schedule-card, .presets-page .preset-card, .prospects-page .prospect-card, .structure-page .tree-node, .reorder-page .reorder-item, .manage-users-page .user-row, .updates-page .metric-card, .pipeline-page .pipeline-card, .add-connection-page .connection-card, .customers-page .customers-card, .connections-page .connection-card { transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } html[data-native-shell] .admin-page .card, html[data-native-shell] .pipeline-page .pipeline-card, html[data-native-shell] .customers-page .customers-card, html[data-native-shell] .connections-page .connection-card, html[data-native-shell] .scorecard-page .sc-row, html[data-native-shell] .habit-tracker-page .habit-card, html[data-native-shell] .time-tracker-page .tt-panel, html[data-native-shell] .structure-page .tree-node, html[data-native-shell] .reorder-page .reorder-item { animation: cp-fade-in-native 0.28s ease-out both; } .customers-fab:hover, .connections-fab:hover { transform: translateY(-2px) scale(1.03); } .modal.fade .modal-dialog { transition: transform 0.25s ease-out, opacity 0.25s ease-out; } } @media (prefers-reduced-motion: reduce) { .site-main > *, .auth-wrapper > *, .index-links-grid .index-link-card, .app-card-grid .app-tile, .customers-grid .customers-card, .connection-list .connection-card, .motd-banner, .alert, .flash-container .alert, .global-overlay-alerts .alert, html[data-native-shell] .custom-navbar, html[data-native-shell] .site-footer { animation: none !important; transition: none !important; transform: none !important; } .site-main a, .site-main button, .site-main .btn, .site-main .card, .site-main .accordion-button, .site-main input, .site-main select, .site-main textarea, .site-main .form-control, .site-main .dropdown-menu, .site-main .modal-content, .site-main .table tbody tr, .auth-page .auth-card, .auth-page .btn-auth-primary, .auth-page .form-control, .index-link-card, .app-tile, .app-page.sc-page .sc-row, .customers-card, .connection-card.dark-card, .customers-fab, .connections-fab, .pipeline-wrap .action-card, .pipeline-wrap .pipeline-card, .performance-dashboard .action-card, .performance-dashboard .metric-card, .habit-tracker-container .habit-card, .habit-tracker-container .day-cell, .presets-container .preset-card, .schedule-container .schedule-card, .prospects-page .prospect-card, .structure-page .tree-wrapper, .reorder-page .reorder-item, .add-connection-page .connection-card, .glass-form-page .form-control, .glass-form-page .btn-glow, .account-page .input-group-text, .account-page .theme-picker__card, .theme-picker__card, .accordion-body, .account-info-item, .account-section, .app-page-surface, .app-glass, .glass-form-page .glass-card, .app-section, .modal.fade .modal-dialog { transition: none !important; } .index-link-card:hover, .app-tile:hover, .app-page.sc-page .sc-row:hover, .customers-card:hover, .connection-card.dark-card:hover, .customers-fab:hover, .connections-fab:hover, .theme-picker__option:hover .theme-picker__card, .account-info-item:hover { transform: none !important; } .site-main .btn:active, .auth-page .btn-auth-primary:active { transform: none !important; } } /* ══════════════════════════════════════ BOOTSTRAP 5 GLOBAL OVERRIDES (per theme) ══════════════════════════════════════ */ /* Primary buttons */ .btn-primary { --bs-btn-color: var(--theme-btn-primary-text); --bs-btn-bg: var(--theme-btn-primary-bg); --bs-btn-border-color: var(--theme-btn-primary-border); --bs-btn-hover-color: var(--theme-btn-primary-text); --bs-btn-hover-bg: var(--color-accent-light); --bs-btn-hover-border-color: var(--color-accent-light); --bs-btn-active-color: var(--theme-btn-primary-text); --bs-btn-active-bg: var(--color-accent-dark); --bs-btn-active-border-color: var(--color-accent-dark); --bs-btn-disabled-color: var(--theme-btn-primary-text); --bs-btn-disabled-bg: var(--theme-btn-primary-bg); --bs-btn-disabled-border-color: var(--theme-btn-primary-border); --bs-btn-focus-shadow-rgb: var(--color-accent-muted); background: linear-gradient(135deg, var(--theme-btn-primary-bg), var(--color-accent-light)) !important; border-color: var(--theme-btn-primary-border) !important; color: var(--theme-btn-primary-text) !important; font-weight: 700; } [data-theme="dark"] .btn-primary, [data-theme="pink"] .btn-primary, html:not([data-theme]) .btn-primary { background: linear-gradient( 135deg, var(--color-accent-dark) 0%, var(--color-accent) 48%, var(--color-accent-light) 100% ) !important; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="pink"] .btn-primary:hover, [data-theme="pink"] .btn-primary:focus, html:not([data-theme]) .btn-primary:hover, html:not([data-theme]) .btn-primary:focus { background: linear-gradient( 135deg, var(--color-accent) 0%, var(--color-accent-light) 55%, #f0d890 100% ) !important; filter: brightness(1.05); box-shadow: 0 8px 28px var(--color-accent-glow); } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); box-shadow: 0 6px 20px var(--color-accent-glow); } .btn-secondary { --bs-btn-color: var(--theme-btn-secondary-text); --bs-btn-bg: var(--theme-btn-secondary-bg); --bs-btn-border-color: var(--color-border); --bs-btn-hover-bg: var(--color-surface-hover); --bs-btn-hover-border-color: var(--color-border-accent); --bs-btn-hover-color: var(--color-text); background: var(--theme-btn-secondary-bg) !important; border-color: var(--color-border) !important; color: var(--theme-btn-secondary-text) !important; } .btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: var(--color-success); --bs-btn-hover-border-color: var(--color-success); background: var(--color-success) !important; border-color: var(--color-success) !important; } .btn-danger { --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger); --bs-btn-hover-bg: var(--color-danger); --bs-btn-hover-border-color: var(--color-danger); background: var(--color-danger) !important; border-color: var(--color-danger) !important; } .btn-warning { --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-color: var(--color-text-inverse); --bs-btn-hover-color: var(--color-text-inverse); background: var(--color-warning) !important; border-color: var(--color-warning) !important; color: var(--color-text-inverse) !important; } .btn-info { --bs-btn-bg: var(--color-info); --bs-btn-border-color: var(--color-info); --bs-btn-hover-bg: var(--color-info); --bs-btn-hover-border-color: var(--color-info); background: var(--color-info) !important; border-color: var(--color-info) !important; } .btn-outline-primary { --bs-btn-color: var(--color-accent); --bs-btn-border-color: var(--color-border-accent); --bs-btn-hover-bg: var(--color-accent-hover-bg); --bs-btn-hover-border-color: var(--color-accent); --bs-btn-hover-color: var(--color-accent-light); color: var(--color-accent) !important; border-color: var(--color-border-accent) !important; } .btn-outline-primary:hover { background: var(--color-accent-hover-bg) !important; color: var(--color-accent-light) !important; } /* Background / text / border utilities */ .bg-primary { background-color: var(--theme-btn-primary-bg) !important; } .text-primary { color: var(--color-accent) !important; } .border-primary { border-color: var(--color-border-accent) !important; } .bg-info { background-color: var(--color-info) !important; } .text-info { color: var(--color-info) !important; } .table-primary { --bs-table-bg: var(--color-accent-hover-bg); --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border-accent); } /* Forms */ .form-control, .form-select { background-color: var(--theme-input-bg); border-color: var(--theme-input-border); color: var(--color-text); } .form-control:focus, .form-select:focus { background-color: var(--theme-input-bg); border-color: var(--color-accent-light); color: var(--color-text); box-shadow: 0 0 0 0.2rem var(--color-accent-hover-bg); } .form-control::placeholder { color: var(--color-text-muted); } /* Tables */ .table { --bs-table-bg: var(--theme-table-bg); --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); --bs-table-striped-bg: var(--theme-table-stripe); --bs-table-hover-bg: var(--color-surface-hover); color: var(--color-text); } .table thead th { color: var(--theme-table-header); border-color: var(--color-border-accent); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--theme-table-stripe); color: var(--color-text); } /* Alerts */ .alert-success { background-color: color-mix(in srgb, var(--color-success) 25%, transparent); color: var(--color-success); border-left: 4px solid var(--color-success); } .alert-danger, .alert-error { background-color: color-mix(in srgb, var(--color-danger) 25%, transparent); color: var(--color-danger); border-left: 4px solid var(--color-danger); } .alert-warning { background-color: color-mix(in srgb, var(--color-warning) 25%, transparent); color: var(--color-warning); border-left: 4px solid var(--color-warning); } .alert-info { background-color: color-mix(in srgb, var(--color-info) 25%, transparent); color: var(--color-info); border-left: 4px solid var(--color-info); } /* Accordion */ .accordion-button { background-color: var(--color-surface); color: var(--color-text); } .accordion-button:not(.collapsed) { background-color: var(--color-accent-hover-bg); color: var(--color-accent-light); } .accordion-body { background-color: var(--color-surface); color: var(--color-text); } /* Nav tabs */ .nav-tabs { border-bottom-color: var(--color-border); } .nav-tabs .nav-link { color: var(--color-text-muted); border-color: transparent; } .nav-tabs .nav-link:hover { color: var(--color-accent-light); border-color: var(--color-border); } .nav-tabs .nav-link.active { color: var(--color-accent-light); background-color: var(--color-surface); border-color: var(--color-border-accent); } /* Pagination */ .pagination { --bs-pagination-color: var(--color-text); --bs-pagination-bg: var(--color-surface); --bs-pagination-border-color: var(--color-border); --bs-pagination-hover-color: var(--color-accent-light); --bs-pagination-hover-bg: var(--color-accent-hover-bg); --bs-pagination-hover-border-color: var(--color-border-accent); --bs-pagination-active-color: var(--theme-btn-primary-text); --bs-pagination-active-bg: var(--theme-btn-primary-bg); --bs-pagination-active-border-color: var(--theme-btn-primary-border); } /* Progress bars */ .progress { background-color: var(--theme-progress-bg); } .progress-bar { background-color: var(--theme-progress-fill); } /* Badges */ .badge.bg-primary { background-color: var(--theme-badge-bg) !important; color: var(--theme-badge-text) !important; } /* Links */ a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--theme-link); } a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--color-accent); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover, html:not([data-theme]) a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--color-accent-light); text-decoration-color: var(--color-accent-muted); } /* Cards */ .card { background-color: var(--theme-card-bg); border-color: var(--color-border); color: var(--color-text); } .card-header { background-color: var(--color-surface-hover); border-bottom-color: var(--color-border); color: var(--color-text); } /* Modals */ .modal-content { background-color: var(--color-bg-elevated); border-color: var(--color-border-accent); color: var(--color-text); } .modal-header { border-bottom-color: var(--color-border); } .modal-footer { border-top-color: var(--color-border); } /* Dropdown menus */ .dropdown-menu { background-color: var(--color-bg-elevated); border-color: var(--color-border-accent); } .dropdown-item { color: var(--color-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-accent-hover-bg); color: var(--color-accent-light); } .dropdown-header { color: var(--color-text-muted); } .dropdown-divider { border-top-color: var(--color-border); } /* List group */ .list-group-item { background-color: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } /* Themed accent button utility */ .btn-gold { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)) !important; border: none !important; color: var(--color-text-inverse) !important; font-weight: 700; border-radius: 999px !important; } .btn-gold:hover { filter: brightness(1.08); box-shadow: 0 6px 20px var(--color-accent-glow); } /* Avatar / icon circle using theme accent */ .theme-avatar { background: var(--theme-btn-primary-bg) !important; color: var(--theme-btn-primary-text) !important; }